扩展:React 项目执行 yarn eject 后的 scripts 目录结构详解
什么是 yarn eject?
yarn eject
是 Create React App(简称 CRA)提供的一条命令,用于将项目从"封装模式"转为"完全可配置模式"。
执行后,CRA 默认隐藏的构建配置(如 Webpack、Babel、ESLint 等)会被暴露到项目中。
scripts 目录结构与说明
执行 yarn eject
后,create-react-app 会将 react-scripts
中的脚本抽出到本地的 scripts
目录中。这个目录包含 React 项目运行时的核心脚本,便于开发者进一步自定义开发、构建、测试流程。
各脚本说明
-
build.js
- 用于打包生产环境代码。
- 调用 Webpack,使用
config/webpack.config.js
生成build/
目录。 - 包括环境变量设置、构建日志输出、性能提示等。
-
start.js
- 用于启动开发服务器。
- 启用
webpack-dev-server
,支持热更新。 - 加载配置:
webpackDevServer.config.js
、webpack.config.js
。
-
test.js
- 启动测试环境,运行基于 Jest 的测试脚本。
- 支持 watch 模式、生成覆盖率报告等。
- 自动加载 Jest 配置路径
config/jest/
。
说明
在你执行 yarn eject
之后,eject.js
脚本不会被保留在项目中,因为它的职责就是将隐藏的配置暴露出来一次,执行完就"完成使命"了。它仍然存在于 react-scripts
的源码中(未 eject 的项目内部),但在 eject 后不会被复制到本地项目中。
eject.js
不会出现在项目中,它仅在未弹出前作为react-scripts eject
的执行脚本。- 脚本中大量使用 Node.js API 和
cross-spawn
等工具处理进程管理和环境变量。 - 脚本执行时默认读取
package.json
中的配置信息以及config
文件夹的内容。
⚠️ 注意:eject 是不可逆的操作,所有脚本暴露后需由开发者手动维护,失去 CRA 自动更新支持。