基于webpack修改插件源码，使用自定义文件替换node

基于webpack修改插件源码，使用自定义文件替换node_modules里面的源码文件

需求：插件不满足要求，需要修改源码，但又想永远保留自己修改的这份，不想被重新下载的覆盖

方法：在运行时执行你替换的方法，将你自定义的文件替换依赖包上的

案例：react+umi.js

1、自己写替换源码文件的方法，这个方法我写在change-modules.js上

2、在node_modules里将你需要修改的文件复制一份出来修改，放在静态资源的文件夹里，自定义一个也叫node_modules的文件夹，按照依赖包里的目录结构把复制的文件放进去，目录结构必须一致

依赖包的node_modules结构

自定义的node_modules结构

change-modules.js源码

const fs = require('fs');

const path = require('path');

// 解决 node_modules 修改源码，导致重新装包而要手动替换源码的重复操作。

// 将 scripts/node_modules 内的文件覆盖真正的 node_modules

const REAL_NODE_MODULES = path.resolve('./node_modules'); // 旧node_modules

const MY_NODE_MODULES = path.resolve('./scripts/node_modules'); // 新node_modules

copy(MY_NODE_MODULES, REAL_NODE_MODULES);

/**

* @param {string} 需要复制的目录、文件

* @param {string} 复制到指定的目录、文件

* @param {function} 每次复制前，都会经过一次filterFn，若返回true，则复制。

function copy(oringe, target,filterFn = ()=> true) {

if (fs.statSync(oringe).isDirectory()) {

// 来源是个文件夹，那目标也整一个文件夹

if (!fs.existsSync(target)) {

fs.mkdirSync(target)

}

fs.readdirSync(oringe).forEach(oringeName => {

const oringeFilePath = path.resolve(oringe, oringeName);

const targetFilePath = path.resolve(target, oringeName);

copy(oringeFilePath, targetFilePath, filterFn);

});

} else if(filterFn(oringe, target)){

fs.copyFileSync(oringe, target);

}

2、在package.json文件添加指令，路径指向你定义的替换方法，如change-modules.js，并且在运行的指令上添加change-modules这个指令，或者直接在运行命令里添加change-modules.js的脚本进去，也是一样的效果。

3、重新运行项目，你会发现依赖包的文件已经变成你修改的那份

基于webpack修改插件源码，使用自定义文件替换node_modules里面的源码文件相关推荐

QML 地图修改插件源码（三），Map在Plugin中设置加载地图类型
常用的地图种类分为交通图,地形图,卫星图等等,在QML的Map(以OSM地图为例)中提供activeMapType属性用于读取当前显示的地图类型(注意:该属性为只读属性,不能用于赋值),QML中地图的 ...
QML 地图修改插件源码（四），Map根据目录作为索引加载地图瓦片
QML中的地图(以OSM为例)在使用过程中会发现当地图层数很多时,特别是如果使用离线地图且地图层级较多时地图会变得很卡(在线地图加载的层级数多且不清除缓存时也会卡),原因在于QML地图插件对地图瓦片的 ...
基于elementui源码实现自定义穿梭框transfer组件
需求:更改elementui中el-transfer样式, 实现单击左侧选项即加入右边选框,单击右侧选项即可回到左侧选框,中间左右来回按钮更改为左侧全选右侧全选,最终修改后效果图如下下图源码可通过g ...
java毕业设计—— 基于java+JSP+SSH的婴幼儿产品销售系统设计与实现（毕业论文+程序源码）——婴幼儿产品销售系统
基于java+JSP+SSH的婴幼儿产品销售系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+JSP+SSH的婴幼儿产品销售系统设计与实现,文章末尾附有本毕业设计的论文和源码下 ...
android毕业设计——基于Android+Tomcat+JavaEE的旧物交易平台设计与实现（毕业论文+程序源码）——旧物交易平台
基于Android+Tomcat+JavaEE的旧物交易平台设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于Android+Tomcat+JavaEE的旧物交易平台设计与实现,文章末尾附有 ...
Android毕业设计——基于Android+Tomcat的网络视频探索系统设计与实现（毕业论文+程序源码）——网络视频探索系统
基于Android+Tomcat的网络视频探索系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于Android+Tomcat的网络视频探索系统设计与实现,文章末尾附有本毕业设计的论文和源 ...
【java毕业设计】基于java+SSH+jsp的酒水销售系统设计与实现（毕业论文+程序源码）——酒水销售系统
基于java+SSH+jsp的酒水销售系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+SSH+jsp的酒水销售系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦. ...
【java毕业设计】基于java+BS的QQ屏幕截图工具设计与实现（毕业论文+程序源码）——屏幕截图工具
基于java+BS的QQ屏幕截图工具设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+BS的QQ屏幕截图工具设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦. 文章目录: ...
【java毕业设计】基于java+swing+GUI的连连看游戏设计与实现（毕业论文+程序源码）——连连看游戏
基于java+swing+GUI的连连看游戏设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+swing+GUI的连连看游戏设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦 ...

基于webpack修改插件源码，使用自定义文件替换node_modules里面的源码文件

基于webpack修改插件源码，使用自定义文件替换node_modules里面的源码文件相关推荐

最新文章

热门文章