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

好吧,笔者是一个后端开发。以前是做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 pathsChange 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...,内有福利哦!


沉静技术派
一名程序员的技术分享

在因准备面试复习知识的时候,发现很多原理都是生活中现象的体现,随即想到如果能用生活中的例子来讲技...

77 声望
10 粉丝
0 条评论
推荐阅读
用故事讲解四种主要的IO模型
没想到公司所在的楼层人也太多了,所有人必须排队一个一个的上电梯,电梯满了之后,剩下的人就得在楼道里干等着,虽然可以刷刷手机,但是等待的时间还是挺无聊的。

沉静阅读 985

你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.2k

封面图
把React新文档投喂给 GPT-4 后...
大家好,我卡颂。最近,React新文档终于上线了。从内容上看,新文档包括:理论知识、学习指引API介绍从形式上看,新文档除了传统的文字内容,还包括:在线Demo示意图小测验可以说是阅读体验拉满。但是,由于文档...

卡颂7阅读 7.5k评论 3

封面图
PDF 预览和下载你是怎么实现的?
在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能,PDF 类型文件的来源又包括 H5 移动端 和 PC 端,而针对这两个不同端的处理会有些许不同,下文会有所提及。

熊的猫7阅读 3.8k评论 1

封面图
第九期:前端九条启发分享
下图是一个常见的列表, 点击列表里的详情按钮会跳到详情页, 那么也许我们在详情页修改了数据状态, 此时可能需要把修改后的状态直接传给列表页从而本地直接更新列表, 这样就不用发送新的api请求与后端交互了。

lulu_up8阅读 849

Next.js-集成状态管理器共享access token以及刷新access token解决方案
SSR和SPA最大的区别就是SSR会区分客户端Client和服务端Server,并且SSR之间只能通过cookie才能在Client和Server之间通信,例如:token信息,以往我们在SPA项目中是使用localStorage或者sessionStorage来存储,但...

Awbeci4阅读 9k评论 2

3个容易混淆的前端框架概念
大家好,我卡颂。有3个容易混淆的前端框架概念:响应式更新单向数据流双向数据绑定在继续阅读本文前,读者可以思考下是否明确知道三者的含义。这三者之所以容易混淆,是因为他们虽然同属前端框架范畴内的概念,但...

卡颂6阅读 922

封面图

在因准备面试复习知识的时候,发现很多原理都是生活中现象的体现,随即想到如果能用生活中的例子来讲技...

77 声望
10 粉丝
宣传栏