React 项目如何修改打包地址（编译输出文件地址）

好吧，笔者是一个后端开发。之前是作C/S项目出身，毫无Web前端基础，为了更好地理解Web开发，去年开始尝试使用公司使用的前端框架React来搭建团队内部使用的系统。经过这个项目的开发，也让我更好地理解了前端同事的不容易，更加坚决了写好接口文档的决心。

最近在把本身作的这个内部系统迁移到公司的统一平台的时候，遇到了一个小问题，公司要求打包的目录名必须为dist，而我这个项目是使用create-react-app搭建的，因此打包的目录是默认的build。

遂开始了查找如何修改打包目录的资料。随便在网上一搜，即是以下的解决方案：

使用eject命令暴露配置，而后修改打包地址

使用这个命令，是不可逆的，执行以前，请将代码备份或提交版本库

一、使用eject命令暴露配置：

npm run eject

二、修改暴露出的配置文件config/path.js，将appBuild修改成须要输出的位置。

三、使用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操做，很遗憾，只能经过版本库回退版本了。

修复npm run start失败的问题

作了以上的修改以后，会致使npm run start失败，错误提示：

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

根据提示语分析得知应该是在npm run start模式下启动时，path获取有问题，方法function override(config, env)里有个env参数，最简单粗暴的方式——根据此参数判断用户时是启动的development仍是production进而进行不一样的处理。

按下面的方式修改代码便可。

// 此文件是为了ant选择性引入
const {injectBabelPlugin} = require('react-app-rewired');

// noinspection JSUnusedLocalSymbols
module.exports = function override(config, env) {
    // antd选择性引入
    config = injectBabelPlugin(['import', {libraryName: 'antd', libraryDirectory: 'es', style: 'css'}], config);

+   if(env === 'development'){
+       console.log('evn is development, skip build path change...')
+   } else if(env === 'production') {
+       console.log('evn is production, change build path...')
        // 修改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;
};

尾声：配置代码解析

到了这里，估计有部分同窗还不满意为何以上代码可以解决问题，做为一个外行人，我按个人理解解释下。

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...，内有福利哦！