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


Posted in Javascript onMarch 21, 2019

好吧,笔者是一个后端开发。以前是做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');

这行代码就是实现我们目的的根源了,修改项目打包地址。

好了,到这里本文结束。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 判断一个元素是否在页面中存在
Dec 27 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
JS前端笔试题分析
Dec 19 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 #Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 #Javascript
详解vue中axios的使用与封装
Mar 20 #Javascript
javascript数组去重方法总结(推荐)
Mar 20 #Javascript
浅谈JavaScript面向对象--继承
Mar 20 #Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 #Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 #Javascript
You might like
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
python打开windows应用程序的实例
2019/06/28 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
美化环境标语
2014/06/20 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
财政局个人总结
2015/03/04 职场文书
统计员岗位职责范本
2015/04/14 职场文书
演讲开场白台词大全
2015/05/29 职场文书