乐趣区

关于javascript:如何修改-nodemodules-里的文件

jiezi

前言

咱们在开发的时候常常会遇到这种状况：

  1. 所依赖的 npm 包有 bug，他人一时半会更新不了

  2. 不满足本人的需要（比方一些 UI 框架），须要批改某些局部

那么这个时候咱们就要去批改 node_modules 外面的源码，间接批改会导致两个问题：

第一，更新问题，重新安装之后，批改的文件会被笼罩

第二，同步问题，node_modules 里的文件个别是不提交到代码库的，那如何让团队其余成员也能同步更新呢？你总不能每次改完之后都手动发给其他人吧。

你可能首先想到的解决办法有这样两个：

  1. 把他人代码全副复制到本人的 src 目录，批改完之后引入

  2. 把他人代码下载到本地，批改完之后从新公布为一个包，而后再装置本人公布的这个包

但这两个解决办法都有上述提到的更新问题，当这个依赖包有更新时，没法主动同步更新。而且咱们引入依赖包的时候，往往引入的是编译之后的代码，这样会导致每次批改完代码之后，还得本人手动编译，很麻烦，那有没有其余更好的解决办法呢？答案是必定的。我想到的有这样几个解决办法，咱们来逐个剖析一下。

阐明

以下所有解决方案都以 request 包为例进行演示。

npm link

npm link 相当于建设一个软连贯，将咱们依赖的包链接到咱们批改之后的包，这个在调试本地包的时候常常会用到，上面咱们来实际操作一下。

  1. fork request 的仓库到本人的仓库，我这里命名为 request-study

  2. clone 到本地

  3. 进入到 request-study 目录，执行 npm link

  4. 进入到咱们的工程目录，执行 npm link request

  5. 批改包文件外面的代码，这里咱们批改的目录是 request-study/lib/auth.js

这样当包外面的文件更新的时候会主动同步到工程项目外面，解决了上述更新的问题。有余的一个中央是当依赖包有更新时，团队其余成员也须要拉取最新的依赖包代码。

webpack alias

webpack alias 的作用是配置别名，比方像这样：

chainWebpack: config => { 
 config.resolve.alias 
 .set('@', resolve('./src')) 
 .set('request/a', resolve('./src/a'))
}

所以咱们能够利用 webpack alias 将须要批改的文件代理到咱们本人的我的项目文件中，操作步骤如下：

  1. 找到他人源码外面的须要批改的文件，复制到 src 目录

  2. 批改代码，留神外面援用其余的文件门路都须要改成绝对路径

  3. 找到这个模块被引入的门路（ 咱们须要拦挡的门路 ）

  4. 配置 webpack alias

咱们来实际操作一下。

咱们批改的文件如下：

文件被援用的门路为 ./lib/auth（咱们要拦挡的门路）

将 auth.js 文件复制到 src/assets/auth.js，将 require 门路中引入为以后 request 包的门路批改为绝对路径，并增加咱们的代码

配置 webpack alias（我这里用的是 vue-cli4，配置文件是 vue.config.js），配置代码为 

const path = require('path');
module.exports = {
 chainWebpack: config => {
 config.resolve.alias
 .set('./lib/auth', path.resolve(__dirname, 'src/assets/auth.js'))
 }
};

启动咱们的我的项目，控制台打印出咱们增加的代码，表明咱们的代码增加胜利。

当依赖包的代码有更新时，咱们也能同步更新，团队其余成员同步批改的代码时也不须要做其它额定的操作。有余的一个中央是当咱们批改的依赖包是在配置文件中（比方 vue.config.js）引入时，这个不会失效。

yarn patch

这个须要用到 v2 版本的 yarn，具体步骤如下：

  1. 全局装置 Yarn 的最新版本：npm install -g yarn，这里阐明一下，如果你之前装置的是应用程序版本，须要先卸载之后再运行这个命令，不然装置实现之后还是之前的 yarn 版本。

  2. 进入你的我的项目目录，运行 yarn set version berry 命令。

  3. 执行 yarn patch request 命令

  4. 在如上图所示文件门路中批改代码

  5. 在你的我的项目根目录新建一个 patches 文件夹，执行 yarn patch-commit C:UsersTWITTY~1AppDataLocalTempxfs-f6241b39 > E:vue-cli4patchesrequest+2.88.2.patch，这样你就能在 patches 文件下看到生成了一个 request+2.88.2.patch 文件，外面保留有你方才批改代码的 diff 内容。

  6. 批改 package.json 文件如下：

    - "request": "^2.88.2" 
+ "request": "patch:request@^2.88.2#./patches/request+2.88.2.patch"

  7. 从新运行 yarn 和 启动我的项目，你就能看到依赖包代码批改之后的变动

这种方法解决了上述更新和团队成员同步问题，毛病是操作起来比拟繁琐，还得依赖 v2 版本的 yarn。

yarn patch 可能呈现的问题：

  1. 运行 yarn set version berry 时，如果呈现相似以下这种谬误

    则可能须要用代理，命令行配置代理办法如下：

    windows：

    set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080

    mac：

    export http_proxy=http://127.0.0.1:1080
export https_proxy=http://127.0.0.1:1080

  2. 运行 yarn patch request 命令时，如果呈现以下这种状况，则须要删除 yarn.lock 文件，从新执行 yarn install。

    具体能够参考我的另一篇文章—记录一次应用 yarn patch 遇到的问题。

  3. 运行 yarn patch request 命令时，如果呈现以下这种状况，阐明有多个版本的包共存，你能够抉择你具体要批改的那个包版本，比方我想批改的是 request 的 2.88.2 版本，就执行 yarn patch request@npm:2.88.2。

patch-package

操作步骤如下：

  1. 批改 package.json 文件如下：

    "scripts": {+ "postinstall": "patch-package"}

  2. 装置 patch-package：npm i patch-package -S

  3. 在 node_modules 外面批改依赖包的代码

  4. 每次批改代码之后执行命令 npx patch-package request

最终会在我的项目根目录生成一个 patches 文件夹，外面保留着批改过的文件记录。

你可能曾经看到了，这种解决办法和 yarn patch 很像。是的，patch-package 能够看作是 yarn patch 的简化版，它相当于封装了 yarn patch 繁琐的操作。

总结

咱们总结一下四种办法：

npm link 团队其余成员更新时须要同时更新批改依赖包；

webpack alias 不实用配置文件依赖的包；

yarn patch 须要将 yarn 降级到 v2 版本，操作步骤多；

patch-package 能够看做是 yarn patch 的一种代替计划，简化了 yarn patch 的很多操作，是一个比拟现实的解决方案。

最初

码字不易，如果感觉对你有点帮忙的话，还请动动你可恶的小指，帮忙点个赞；

如果你还有其余解决办法或者问题，也欢送留言交换。

参考资料：
https://juejin.cn/post/6844904163558555662
https://yarnpkg.com

退出移动版