扩展：React 项目执行 yarn eject 后的 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 支持}
}