详解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中变量相关的细节分析
Aug 13 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
Vue项目中设置背景图片方法
Feb 21 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Vue实现购物车场景下的应用
2017/11/27 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
python操作toml文件的示例代码
2020/11/27 Python
大学生求职简历的自我评价
2013/10/21 职场文书
医院门卫岗位职责
2013/12/30 职场文书
小学教师节活动方案
2014/01/31 职场文书
小学安全教育材料
2014/02/17 职场文书
啦啦队口号大全
2014/06/16 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS