详解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 相关文章推荐
什么是JavaScript
Aug 13 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
Vue响应式原理详解
Apr 18 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
微信小程序tabBar设置实例解析
Nov 14 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脚本数据库功能详解(中)
2006/10/09 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
激活 ActiveX 控件
2006/10/09 Javascript
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
jQuery 表格工具集
2010/04/25 Javascript
js 设置选中行的样式的实现代码
2010/05/24 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
Python高级特性与几种函数的讲解
2019/03/08 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python压包的概念及实例详解
2021/02/17 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
保安岗位职责
2014/02/21 职场文书
幼儿园老师寄语
2014/04/03 职场文书
影子教师研修方案
2014/06/14 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python