扩展：React 项目执行 yarn eject 后的 package.json 变化详解及参数解析

什么是 yarn eject？
React 项目执行 yarn eject 后的 package.json 变化详解
- 1. 脚本部分 Scripts 被替换
- 2. 新增构建依赖 dependencies（部分）
- 3. 新增 Babel 配置
- 4. 新增 Jest 测试配置
package.json 参数解析

什么是 yarn eject？

yarn eject 是 Create React App（简称 CRA）提供的一条命令，用于将项目从“封装模式”转为“完全可配置模式”。
执行后，CRA 默认隐藏的构建配置（如 Webpack、Babel、ESLint 等）会被暴露到项目中。

React 项目执行 yarn eject 后的 package.json 变化详解

执行 yarn eject 后，package.json 发生了显著变化，主要体现在以下几个方面：

1. 脚本部分 Scripts 被替换

原来：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

变为：

"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
}

说明：

原本使用 react-scripts 封装的命令，变成指向项目本地 scripts 目录的脚本文件，方便自定义。
eject 脚本被移除（只能执行一次）。

2. 新增构建依赖 dependencies（部分）

分类	示例包名	用途简述
🛠 构建工具	`webpack`, `webpack-dev-server`	代码打包与本地开发服务器
🎨 样式处理	`css-loader`, `style-loader`, `postcss-loader`, `sass-loader`	加载与优化 CSS/SASS
🔌 插件支持	`html-webpack-plugin`, `mini-css-extract-plugin`	自动生成 HTML，抽离样式文件
🧹 代码检查	`eslint`, `eslint-webpack-plugin`	代码规范校验
🔬 测试工具	`jest`, `babel-jest`, `jest-watch-typeahead`	前端测试框架
🧩 Babel 相关	`@babel/core`, `babel-loader`, `babel-preset-react-app`	JavaScript 转译工具
🌐 浏览器兼容	`browserslist`, `postcss-preset-env`, `postcss-normalize`	保证旧浏览器兼容性
🔁 热更新支持	`react-refresh`, `@pmmmwh/react-refresh-webpack-plugin`	实现组件级热更新
🧰 辅助工具	`dotenv`, `fs-extra`, `prompts`	环境变量、文件管理与命令行交互

3. 新增 Babel 配置

"babel": {
  "presets": [
    "react-app"
  ]
}

说明：

Babel 是一个将新语法“转换”为旧浏览器支持的工具。
CRA 默认配置通过 "react-app" preset 进行转译，现在你可以手动修改它。

4. 新增 Jest 测试配置

"jest": {
  "roots": ["<rootDir>/src"],
  "setupFiles": ["react-app-polyfill/jsdom"],
  "testMatch": ["<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
  ...
}

说明：

Jest 是用于编写自动化测试的框架。
CRA 原本封装了它，现在变得可手动管理。
包括匹配哪些测试文件、如何转译、如何映射模块名、哪些插件参与等。

package.json 参数解析

{
  "dependencies": {
    // Babel 是 JavaScript 的编译器，这里是其核心包，用于将高级语法转换为浏览器能识别的代码
    "@babel/core": "^7.16.0",

    // 热更新插件，配合 React Fast Refresh 实现页面不刷新快速预览改动
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

    // 用于将 SVG 文件作为 React 组件导入的 Webpack 插件
    "@svgr/webpack": "^5.5.0",

    // Babel-Jest 是用于将代码转译后再交给 Jest 测试的工具
    "babel-jest": "^27.4.2",

    // Babel 加载器，Webpack 会用它来处理代码转译
    "babel-loader": "^8.2.3",

    // 支持将图片等资源命名导入，便于统一管理资源路径
    "babel-plugin-named-asset-import": "^0.3.8",

    // React 官方推荐的 Babel 配置集合，用于兼容性、性能和插件预设
    "babel-preset-react-app": "^10.0.1",

    // 一个用于处理 JSON 的库，CRA 内部构建配置用到
    "bfj": "^7.0.2",

    // 配置浏览器兼容性用的库，与 "browserslist" 字段配合使用
    "browserslist": "^4.18.1",

    // 将类名或路径转为小驼峰格式，如 `hello-world` → `helloWorld`
    "camelcase": "^6.2.1",

    // Webpack 插件，检测路径大小写是否一致（Windows/macOS 下不敏感，Linux 下敏感）
    "case-sensitive-paths-webpack-plugin": "^2.4.0",

    // 用于加载 `.css` 文件，并处理 @import 等语法
    "css-loader": "^6.5.1",

    // CSS 最小化压缩工具，提高生产环境性能
    "css-minimizer-webpack-plugin": "^3.2.0",

    // 读取 `.env` 文件中的变量，常用于环境配置
    "dotenv": "^10.0.0",

    // 扩展 dotenv 功能，支持嵌套变量（例如 A=${B}）
    "dotenv-expand": "^5.1.0",

    // ESlint 静态语法检查器，辅助开发时发现代码问题
    "eslint": "^8.3.0",

    // React 脚手架使用的 ESlint 规则集合
    "eslint-config-react-app": "^7.0.1",

    // Webpack 插件，集成 ESlint 代码检查到构建流程中
    "eslint-webpack-plugin": "^3.1.1",

    // 文件加载器，用于加载图像、字体等资源
    "file-loader": "^6.2.0",

    // 提供增强的文件系统操作，例如复制文件等
    "fs-extra": "^10.0.0",

    // 自动生成 HTML 页面并注入构建后的 JS 脚本
    "html-webpack-plugin": "^5.5.0",

    // 用于模拟样式模块，通常用于测试时处理 CSS 模块导入
    "identity-obj-proxy": "^3.0.0",

    // JavaScript 测试框架（Facebook 开发），用于单元测试
    "jest": "^27.4.3",

    // Jest 用来解析模块路径的工具
    "jest-resolve": "^27.4.2",

    // Jest 插件，测试时支持模糊文件名/函数名搜索
    "jest-watch-typeahead": "^1.0.0",

    // 分离 CSS 文件，生成独立的 .css 文件
    "mini-css-extract-plugin": "^2.4.5",

    // 用于处理 CSS，如加前缀等优化
    "postcss": "^8.4.4",

    // 修复 Flexbox 在部分浏览器中的兼容性问题
    "postcss-flexbugs-fixes": "^5.0.2",

    // 将 CSS 交给 PostCSS 处理的 Webpack 加载器
    "postcss-loader": "^6.2.1",

    // 标准化浏览器默认样式（normalize.css），保持一致性
    "postcss-normalize": "^10.0.1",

    // PostCSS 插件集合，包括现代 CSS 特性转换
    "postcss-preset-env": "^7.0.1",

    // 命令行交互库，用于生成配置文件（如 eject 时的交互）
    "prompts": "^2.4.2",

    // 浏览器端刷新库，支持热更新（Fast Refresh）
    "react-refresh": "^0.11.0",

    // Node 模块路径解析工具，用于找出模块真正所在路径
    "resolve": "^1.20.0",

    // 解决 source map 问题（调试时映射原始文件）
    "resolve-url-loader": "^4.0.0",

    // SCSS 编译工具，用于处理 `.scss` 文件
    "sass-loader": "^12.3.0",

    // 语义化版本处理工具，用于判断包版本是否兼容
    "semver": "^7.3.5",

    // Webpack 加载 source map 的加载器，用于调试支持
    "source-map-loader": "^3.0.0",

    // 动态将 CSS 注入页面 `<style>` 标签中
    "style-loader": "^3.3.1",

    // Tailwind CSS 工具类 CSS 框架（新增时可能需要配置 PostCSS）
    "tailwindcss": "^3.0.2",

    // JS 最小化压缩工具，压缩代码用于生产环境
    "terser-webpack-plugin": "^5.2.5",

    // Web Vitals 指标收集工具，用于衡量页面体验（如 LCP、FID）
    "web-vitals": "^2.1.4",

    // Webpack 是打包工具，React 项目的核心构建工具
    "webpack": "^5.64.4",

    // 开发服务器，支持热重载、自动刷新等功能
    "webpack-dev-server": "^4.6.0",

    // 生成构建产物清单文件（manifest.json），用于资源管理
    "webpack-manifest-plugin": "^4.0.2",

    // Workbox 是 Google 推出的 PWA 工具包，支持离线缓存
    "workbox-webpack-plugin": "^6.4.1"
  },

  "scripts": {
    // 启动开发服务器，默认地址是 http://localhost:3000
    "start": "node scripts/start.js",

    // 构建生产环境代码，会输出到 build/ 目录
    "build": "node scripts/build.js",

    // 启动测试框架 Jest，运行项目中所有测试文件
    "test": "node scripts/test.js"
  },

  "jest": {
    // Jest 配置项，用于指定测试目录、文件匹配规则、使用的转译器等
    // roots：测试文件所在根目录
    // setupFiles：在测试前执行的初始化脚本
    // transform：指定使用 Babel 或 CSS 等转换器处理对应文件类型
    // moduleNameMapper：模块映射，用于 mock 样式文件等
    // watchPlugins：支持模糊搜索测试用例的插件
    // resetMocks：自动重置 mock 数据，确保测试之间不干扰
  },

  "babel": {
    // Babel 配置，使用 react-app 预设，包括 ES6+ 和 JSX 支持
  }
}