共计 2677 个字符，预计需要花费 7 分钟才能阅读完成。
好吧，笔者是一个后端开发。以前是做 C / S 项目出身，毫无 Web 前端基础，为了更好地理解 Web 开发，去年开始尝试使用公司使用的前端框架 React 来搭建团队内部使用的系统。通过这个项目的开发，也让我更好地理解了前端同事的不容易，更加坚定了写好接口文档的决心。
最近在把自己做的这个内部系统迁移到公司的统一平台的时候，遇到了一个小问题，公司要求打包的目录名必须为 dist，而我这个项目是使用 create-react-app 搭建的，所以打包的目录是默认的 build。
遂开始了查找如何修改打包目录的资料。随便在网上一搜，便是如下的解决方案：
使用 eject 命令暴露配置，然后修改打包地址
使用这个命令，是不可逆的，执行之前，请将代码备份或提交版本库
1、使用 eject 命令暴露配置：
npm run eject
2、修改暴露出的配置文件 config/path.js，将 appBuild 修改为需要输出的位置。
3、使用 npm install 命令安装依赖，然后执行 npm run build 打包
这个方案当然一点毛病都没有，通过这个可以认识到，create-react-app 在创建 React 项目的时候，是隐藏了许多开发者不需要过多关心的配置项的，尽量简化了前端的开发。而 eject 命令则可以让这些配置项暴露出来。
eject 的弊端
要注意的是，eject 命令是不可逆的（至少官方没有提供回退的方法）。使用了这个命令，你就要接受你的开发目录面多了很多的配置文件和脚本。
这还不是最关键的，因为我的项目使用了 antd 作为 UI 框架，其使用了 react-app-rewired 这个东东，导致我在 eject 之后执行 npm run build 会报错。
react-app-rewired 是什么？
作为一个后端开发，最大的感触就是，前端的网上资料有用的太少，因为各种框架、技术更新迭代太快，很多博客上的解决方案都已经过时了。你们看到的我的这篇文章，可能很快也会过时，但是我会把思路教给大家——话说，当遇到一个技术问题，实在解决不了怎么办？当然是找官方文档了。
通过在 react-app-rewired 的官方文档，才知道这个工具的一个功能是在不 eject 的情况下，修改配置文件。上文说到的 antd 也是为了实现修改配置，才引入的这个工具。既然它的功能如此，那么用来修改打包地址应该也是可行的。
使用 react-app-rewired 在不 eject 的情况下修改打包地址
思路虽然有了，但是对于前端基础薄弱的后台开发来说，还是不知道怎么实操，在看了几篇 issue 之后，Changing the default paths，Change build output path 之后，终于找到了方法。
首先当然是要引入 react-app-rewired 了，这里我就不写方法了，大家参考官方文档，不会过时。
引入之后，会有一个 config-overrides.js 文件，因为我引入了 antd，里面已经有了些内容：
// 此文件是为了 ant 选择性引入
const {injectBabelPlugin} = require(‘react-app-rewired’);
module.exports = function override(config, env) {
// antd 选择性引入
config = injectBabelPlugin([‘import’, {libraryName: ‘antd’, libraryDirectory: ‘es’, style: ‘css’}], config);
return config;
};
增加如下代码（去掉我用来标记代码的 + 号哈）：
// 此文件是为了 ant 选择性引入
const {injectBabelPlugin} = require(‘react-app-rewired’);
module.exports = function override(config, env) {
// antd 选择性引入
config = injectBabelPlugin([‘import’, {libraryName: ‘antd’, libraryDirectory: ‘es’, style: ‘css’}], config);
+ // 修改 path 目录
+ const path = require(‘path’);
+ const paths = require(‘react-scripts/config/paths’);
+ paths.appBuild = path.join(path.dirname(paths.appBuild), ‘dist’);
+ config.output.path = path.join(path.dirname(config.output.path), ‘dist’);
return config;
};
如此，再执行 npm run build 就可以了，问题解决。
如果你已经进行了 eject 操作，很遗憾，只能通过版本库回退版本了。
尾声：配置代码解析
到了这里，估计有部分同学还不满意为什么以上代码能够解决问题，作为一个外行人，我按我的理解解释下。
const path = require(‘path’);
这行代码是基于 require.js，是一个 js 进行引入包的工具。通过这行代码，拿到 path，才能够对路径做处理。
const paths = require(‘react-scripts/config/paths’);
react-scripts 里面有 React 项目用于打包的命令，以及配置文件，如果你进行了 eject，会发现 config 和 script 目录里的内容与 react-scripts 里的同名目录惊人的相似。可以认为 eject 是把这里的配置暴露出来了。这里这行代码是为了获取项目的路径配置。
paths.appBuild = path.join(path.dirname(paths.appBuild), ‘dist’);
这行代码是修改配置里的 appBuild 目录，React 项目在进行 build 的时候，都是根据这里配置的目录做的操作（例如检查打包后的代码大小，计算 Gzip 等），必须要修改，不然打包会失败。
config.output.path = path.join(path.dirname(config.output.path), ‘dist’);
这行代码就是实现我们目的的根源了，修改项目打包地址。
好了，到这里本文结束。
尾声：福利
如果本文对你有帮助，欢迎关注、点赞、收藏一波。
最近业余时间做了个 Java+React 爬虫项目，感兴趣的朋友 Star 一波：https://github.com/hxy91819/c…，内有福利哦！
