为什么不该eject：rescripts让create-react-app零eject定制的完整指南

【免费下载链接】rescripts

💥 Use the latest react-scripts with custom configurations for Babel, ESLint, TSLint, Webpack,... ∞

项目地址：https://gitcode.com/gh_mirrors/re/rescripts

点击查看免费下载

rescripts 是一款专为 create-react-app（CRA）打造的项目配置定制工具：不用执行npm run eject，就能自由改写 Babel、ESLint、TSLint、Webpack 等构建配置。它用一个轻量"插件系统"拦截并转换 CRA 的默认配置，让你既保留 react-scripts 的持续升级能力，又获得完全掌控构建流程的自由。本文将带你 3 步完成接入，并对比 eject 的三大坑，说明为什么 rescripts 是更聪明的选择。

为什么eject是"回头路"？

CRA 以"开箱即用"著称，但默认隐藏了大量配置。官方给出的唯一定制途径是npm run eject——一旦执行：

• 不可逆：构建配置全部释放到项目中，再也无法撤回
• 断绝升级：从此无法再升级react-scripts新版本，CRA 生态更新与你无关
• 接手一坨代码：Webpack、Jest、devServer 等几十行"knarly-lookin'"配置全归你维护

rescripts 官方 slogan 说得直白：Advanced CRA configs, without the pain（高级 CRA 配置，无需痛苦）。它就是为"想定制、但不想 eject"的开发者设计的。

工作原理：不改源码的"配置拦截器"

rescripts 的核心思路非常轻：

1. 用rescripts命令替换package.json中的react-scripts调用（start / build / test）
2. 加载你在package.json的rescripts字段或根目录.rescriptsrc文件中声明的定制脚本
3. 按顺序把这些"管道"依次作用到 CRA 的 webpack、devServer、jest 三份配置上，再交回给 react-scripts 执行

整个加载与转换逻辑集中在 packages/cli/loader.js：它先按优先级解析--config参数、package.json的rescripts字段、.rescriptsrc文件，然后递归地把嵌套的 rescript 展平合并成配置管道。

也就是说：react-scripts 依然是执行者，rescripts 只是站在中间的"配置翻译官"——升级、兼容性、构建稳定性都不受影响。

三步快速上手：安装到运行

第1步：安装 @rescripts/cli

npm i -D @rescripts/cli

注意：react-scripts@^2.1.2需要至少@rescripts/utilities^0.0.4和@rescripts/cli^0.0.7。若想研究源码，也可以克隆仓库到本地：

git clone https://gitcode.com/gh_mirrors/re/rescripts

第2步：替换 scripts 命令

编辑package.json，把三处react-scripts换成rescripts，并顺手删掉eject脚本：

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

这个写法在官方示例 packages/examples/scan-env-for-configs/package.json 中可以直接参考。

第3步：声明要启用的 rescript

在package.json中新增rescripts字段，或在根目录放一个.rescriptsrc文件（支持.js/.json/ 无扩展名）：

"rescripts": ["env"]

env会扫描项目根目录与package.json，若发现 Babel / ESLint / TSLint 配置文件，就自动覆盖 CRA 默认配置——从此你可以像普通项目一样写.babelrc和.eslintrc。

常用内置rescripts速查清单

仓库自带一组开箱即用的 rescript 包，按需安装即可：

rescript	用途	源码位置
use-babel-config	指定自定义 Babel 配置	packages/rescripts/use-babel-config/index.js
use-eslint-config	指定自定义 ESLint 配置	packages/rescripts/use-eslint-config/index.js
use-tslint-config	指定自定义 TSLint 配置（TypeScript 项目）	packages/rescripts/use-tslint-config/index.js
use-stylelint-config	指定 StyleLint 配置（支持 CSS / SCSS / CSS-in-JS）	packages/rescripts/use-stylelint-config/index.js
use-rewire	复用为 react-app-rewired 编写的 rewire 插件	packages/rescripts/use-rewire/README.md

传参方式也很自然——用数组包裹并追加参数即可：

// .rescriptsrc module.exports = [ ['use-babel-config', '.babelrc'], ['use-eslint-config', '.eslintrc'], ]

💡小技巧：env每次运行都要扫描项目；如果直接指定配置源（如上例），启动会更快。

进阶玩法：像Babel插件一样组合Webpack定制

一个 rescript 可以是四种形态之一，也可任意嵌套组合（详见 README.md）：

• 一组子 rescript 的数组
• 直接接收并返回 webpack 配置的函数
• 包含webpack/devServer/jest任意组合的对象
• 接收参数、返回新 rescript 的工厂函数

例如给项目加上构建通知插件，只需在.rescriptsrc中写：

const { prependWebpackPlugin } = require('@rescripts/utilities') const WebpackBuildNotifierPlugin = require('webpack-build-notifier') module.exports = prependWebpackPlugin( new WebpackBuildNotifierPlugin({ title: 'Rescripted App' }) )

这里的@rescripts/utilities是官方提供的"配置手术刀"SDK，常用方法包括：

• getPaths/edit/replace/remove：按条件查找并修改配置树中的任意节点，实现见 packages/utilities/selectors/general.js
• getWebpackPlugin/prependWebpackPlugin/appendWebpackPlugin：按构造器名精准操作 Webpack 插件
• removeWebpackPlugin：删除不想要的默认插件

🔍 还有个隐藏的middleware 机制：给 rescript 加上isMiddleware = true，它就会在每两个 rescript 之间各执行一次，方便你追踪配置被每一步修改后的样子，排查多插件叠加冲突特别好用。

eject vs rescripts：一张表看懂差异

对比维度	npm run eject	rescripts
可逆性	❌ 不可逆	✅ 随时可撤，删掉依赖即恢复
react-scripts 升级	❌ 永久失去	✅ 正常跟随升级
维护成本	全量构建代码自己背	只维护自己的定制脚本
定制深度	全部	全部（webpack / devServer / jest 均可改）
接入成本	一次性 1 条命令	3 步配置 + 一个字段声明

总结

• 只要还没 eject，就可以用 rescripts 接管 CRA 的所有定制需求
• 核心就 3 步：装@rescripts/cli→ 换rescripts命令 → 声明rescripts字段
• 内置env等 5 个开箱即用包，@rescripts/utilities提供精准的 Webpack 配置操作能力
• 项目整体结构清晰：CLI 在 packages/cli/，工具 SDK 在 packages/utilities/，可复用示例在 packages/examples/，上手成本极低

零 eject、可升级、组合自由——rescripts 让你把"要 eject"这个念头直接留在脑子里，只把定制脚本留在项目里。

赞分享

【免费下载链接】rescripts

💥 Use the latest react-scripts with custom configurations for Babel, ESLint, TSLint, Webpack,... ∞

项目地址：https://gitcode.com/gh_mirrors/re/rescripts

点击查看免费下载

相关推荐

• CRACO 完全指南：不 eject 也能定制 Create React App 的配置层

  CRACO 完全指南：不 eject 也能定制 Create React App 的配置层 导读 CRACO（ C reate R eact A pp C on

  开发工具前端构建

• CRACO（Create React App Configuration Override）完全指南：不 eject 定制 CRA 的配置层

  CRACO（Create React App Configuration Override）完全指南：不 eject 定制 CRA 的配置层 导读 CRACO（

  开发工具前端构建

• 揭秘Create React App eject：何时以及为何需要弹出配置的终极指南

  揭秘Create React App eject：何时以及为何需要弹出配置的终极指南 Create React App（CRA）是构建现代React应用的最流行

  前端开发工具CLI构建工具