企业官网建设流程全解析

如果你正在使用 create-react-app 搭建 React 项目，却发现无法修改端口、代理或 HTTPS 等 devServer 配置，又不想 eject 放弃升级能力——那么 rescripts 就是为你准备的方案。它可以在不 eject 的前提下，直接定制 react-scripts 的 devServer、Webpack 与 Jest 三大核心流程，是 CRA 开发服务器配置修改的轻量级利器。

为什么需要 rescripts 修改 devServer？

CRA（create-react-app）为了"开箱即用"，把开发服务器配置锁死在react-scripts内部。当你需要以下能力时，官方只会给你一个不可逆的eject：

• 🌐 修改 devServer 的端口、host或代理（proxy）规则
• 🔐 为开发服务器启用HTTPS
• 📝 自定义setupProxy之外的服务器行为
• 🧩 向 devServer 注入额外插件或回调

而 rescripts 的思路是：在执行 CRA 脚本之前，把你的"rescript"配置管道注入到原始配置中再启动。整个过程可逆、可组合，随时可以升级react-scripts。

快速上手：3 步接入 rescripts

第 1 步：安装 CLI 工具

npm i -D @rescripts/cli

第 2 步：把package.json中的react-scripts start等调用替换为rescripts start（build、test同理）。

第 3 步：在package.json中增加rescripts字段，或创建一个.rescriptsrc文件（支持.js/.json/ 无扩展名）来声明你要使用的 rescript。

配置解析的完整逻辑见 packages/cli/loader.js，它按--config参数 →package.json的rescripts字段 → 根目录.rescriptsrc的顺序查找你的配置。

如何编写一个修改 devServer 的 rescript

rescript 有三种形态，对 devServer 最实用的是对象形态：它包含webpack、devServer、jest三个可选函数，各自接收对应配置并返回修改后的新配置。

module.exports = { devServer: config => { const updated = { ...config, port: 3010, https: true } return updated }, }

启动rescripts start时，CLI 会做两件事（见 packages/cli/scripts/start.js）：

1. 从你的 rescript 中收集webpack与devServer两组变换函数；
2. 通过 packages/cli/patch.js 把它们分别"打补丁"到react-scripts内部的config/webpack.config与config/webpackDevServer.config，然后再真正调用 CRA 的 start 脚本。

也就是说：你改的不是某个文件，而是 devServer 配置对象本身——无论 react-scripts 内部如何重构路径，你的修改都会作用在最终生效的对象上。

常见场景示例

修改端口与代理

module.exports = { devServer: config => ({ ...config, port: 4000, proxy: { '/api': 'http://localhost:8080', }, }), }

带参数的 rescript：把 rescript 包成数组，第二个参数起就是选项，适合封装成团队共享的 npm 包：

module.exports = [['my-devserver-rescript', {port: 4000}]]

复用 react-app-rewired 的 rewire：如果你已有针对 react-app-rewired 的 devServer rewire，可以用官方的 use-rewire 直接迁移：

module.exports = [ ['use-rewire', 'name-of-rewire', '其他参数'], ]

仓库中有一个可直接参考的完整示例：packages/examples/using-rewire/.rescriptsrc.js，它同时演示了 webpack、devServer、jest 三个作用域的写法；packages/examples/editing-webpack-plugins/.rescriptsrc.js 则展示了如何用工具函数编辑插件。

调试技巧：用 Middleware 追踪配置变化

如果多个 rescript 叠加后不确定 devServer 最终长什么样，可以写一个"中间件"rescript：给它打上isMiddleware = true标记，它就会在每个 rescript 执行之间各运行一次，方便你用console.log观察配置流转过程。中间件的执行顺序规则见 README 的 Middleware 章节，配置路径的解析则集中在 packages/utilities/paths.js。

常见问题

Q：devServer 的修改对 build/test 生效吗？不会。devServer函数只在rescripts start时被收集与注入；build和test走各自的 webpack / jest 管道，互不干扰。

Q：rescripts 支持哪些版本的 react-scripts？@rescripts/cli的 peerDependencies 声明为react-scripts@2 - 4，详见 packages/cli/package.json。

Q：不写.rescriptsrc会怎样？CLI 会抛出"未定义 root rescript"的错误提示，检查脚本输出与网络即可定位。

写在最后

rescripts 用"配置管道注入"的方式，把 CRA 黑盒中 devServer 的定制门槛降到了最低：几十行以内的 rescript 文件，就能完成过去必须 eject 才能实现的开发服务器修改，同时保留react-scripts的版本升级能力。建议从本文的端口/代理示例起步，再逐步叠加代理、HTTPS 与团队共享的 rescript 包。

延伸阅读：packages/rescripts/use-rewire/README.md、packages/utilities/index.js