扩展:React 项目执行 yarn eject 后的 scripts 目录结构详解

扩展:React 项目执行 yarn eject 后的 scripts 目录结构详解

  • [什么是 yarn eject?](#什么是 yarn eject?)
  • [scripts 目录结构与说明](#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.jswebpack.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 自动更新支持。

相关推荐
英俊潇洒美少年34 分钟前
#React 16/17/18/19 超精简速记版(面试前5分钟背完)
前端·react.js·面试
早點睡3902 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-permissions
javascript·react native·react.js
英俊潇洒美少年2 小时前
函数组件(Hooks)的 **10 大优点**
开发语言·javascript·react.js
labixiong2 小时前
React Hooks 闭包陷阱:高级场景与深度思考
前端·javascript·react.js
早點睡3903 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-contacts
javascript·react native·react.js
英俊潇洒美少年3 小时前
JS 事件循环(宏/微任务) ↔ Vue ↔ React** 三者的关系
javascript·vue.js·react.js
我命由我123453 小时前
React - 路由样式丢失问题、路由观察记录、路由传递参数
开发语言·前端·javascript·react.js·前端框架·html·ecmascript
英俊潇洒美少年3 小时前
React类组件和函数组件的所有核心区别
前端·javascript·react.js
早點睡3904 小时前
ReactNative项目鸿蒙化三方库集成实战:react-native-calendars(日历展开和日程模块存在兼容性问题)
react native·react.js·harmonyos
爱学习的程序媛5 小时前
【Web前端】蚂蚁AntV:企业级数据可视化全栈方案
前端·信息可视化·前端框架·web·数据可视化