详解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 30 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
Three.js基础部分学习
Jan 08 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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入门教程 精简版
2009/12/13 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python with (as)语句实例详解
2020/02/04 Python
用python批量移动文件
2021/01/14 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
给朋友的道歉信
2014/01/09 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
经费申请报告范文
2015/05/18 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
python3操作redis实现List列表实例
2021/08/04 Python
利用JavaScript写一个简单计算器
2021/11/27 Javascript