什么是 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 支持}
}