怎么修改别人网站内容( webpack-cli4：如何修改别人的源码_modules里的文件)

　　怎么修改别人网站内容(

webpack-cli4：如何修改别人的源码_modules里的文件)

　　详细说明如何修改node_modules中的文件

　　更新时间：2020年5月22日09:30:33 作者：沉沫_

　　本文文章主要是详细介绍如何修改node_modules中的文件。文章中介绍的示例代码非常详细，对大家的学习或工作有一定的参考价值。有需要的朋友可以关注下方小编一起学习

　　前言

　　有时候我们在npm上使用这个包，发现bug，知道怎么修改，但是别人可能一时无法更新，或者我们有特殊需要别人不愿意修改。这个时候，我们只能自己动手了。那么我们应该如何修改别人的源代码呢？首先，直接修改node_modules中的文件是不行的，重装之后依赖就没了。常用的方法有两种：

　　这两种方式的缺点是更新比较麻烦，每次都需要手动更新代码，无法和插件同步更新。如果我们要修改的代码只是别人的一个小模块，而其他大部分代码保持不变，这时候就有一个非常投机的操作：使用webpack别名来覆盖别人的代码。

　　webpack别名的作用

　　webpack alias 一般用来配置路径别名，这样我们就可以少写路径代码：

chainWebpack: config => {

config.resolve.alias

.set('@', resolve('src'))

.set('#', resolve('src/views/page1'))

.set('&', resolve('src/views/page2'));

},

　　换句话说，webpack alias 会代替我们写的“简写路径”，对node_modules中的文件也有效。这时候我们可以用自己的文件替换别人源代码中引用模块的路径。

　　具体操作如下：

　　在别人的源码中找到需要修改的模块，进入src目录修改bug。注意里面引用的其他文件需要写成绝对路径。找到引入这个模块的路径（我们需要截取的路径）配置webpack alias

　　我们开始做吧

　　以qiankun框架的patchers模块为例：

　　文件被引用的路径是：./patchers（我们要截取的路径）

　　该文件的内容是：

　　将内容复制到src/assets/patchers.js，将其导入路径修改为绝对路径，并添加我们的代码：

　　配置webpack别名（我使用的是vue-cli4，配置文件是vue.config.js）：

const path = require('path');

module.exports = {

chainWebpack: config => {

config.resolve.alias

.set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))

}

};

　　运行代码，控制台打印成功，说明我们已经成功覆盖了别人的代码，当别人的代码更新时，我们也可以同时更新，但是这个模块的代码使用了我们自定义的。也可以打包后使用。

　　补充：使用patch-package修改

　　根据朋友@Leemagination的指导，使用patch-package修改node_modules中的文件比较方便

　　步骤也很简单：

　　安装patch-package：npm i patch-package --save-dev 修改package.json，添加postinstall命令：

"scripts": {

+ "postinstall": "patch-package"

}

　　修改 node_modules 中的代码

　　执行命令：npx patch-package qiankun。

　　第一次使用patch-package，会在项目的根目录下生成一个patch文件夹，里面有修改文件的diff记录。

　　包版本更新后，执行命令：git apply --ignore-whitespace patch/qiankun+2.0.11.patch。其中qiankun+2.0.11.patch就是它生成的文件名。

　　结尾

　　这种方法虽然是推测性的，有很多局限性，但也非常有用。技术需要不断探索。有任何问题或错误欢迎指出！

　　至此，这篇关于如何修改node_modules中文件的文章就介绍到这里了。更多相关的node_modules修改内容，请搜索Script Home之前的文章或继续浏览相关文章下方，希望大家以后多多支持Scripthome！