共计 3113 个字符,预计需要花费 8 分钟才能阅读完成。
前言
咱们在开发的时候常常会遇到这种状况:
-
所依赖的 npm 包有 bug,他人一时半会更新不了
-
不满足本人的需要(比方一些 UI 框架),须要批改某些局部
那么这个时候咱们就要去批改 node_modules 外面的源码,间接批改会导致两个问题:
第一,更新问题,重新安装之后,批改的文件会被笼罩
第二,同步问题,node_modules 里的文件个别是不提交到代码库的,那如何让团队其余成员也能同步更新呢?你总不能每次改完之后都手动发给其他人吧。
你可能首先想到的解决办法有这样两个:
-
把他人代码全副复制到本人的 src 目录,批改完之后引入
-
把他人代码下载到本地,批改完之后从新公布为一个包,而后再装置本人公布的这个包
但这两个解决办法都有上述提到的更新问题,当这个依赖包有更新时,没法主动同步更新。而且咱们引入依赖包的时候,往往引入的是编译之后的代码,这样会导致每次批改完代码之后,还得本人手动编译,很麻烦,那有没有其余更好的解决办法呢?答案是必定的。我想到的有这样几个解决办法,咱们来逐个剖析一下。
阐明
以下所有解决方案都以 request 包为例进行演示。
npm link
npm link 相当于建设一个软连贯,将咱们依赖的包链接到咱们批改之后的包,这个在调试本地包的时候常常会用到,上面咱们来实际操作一下。
-
fork request 的仓库到本人的仓库,我这里命名为 request-study
-
clone 到本地
-
进入到 request-study 目录,执行
npm link
-
进入到咱们的工程目录,执行
npm link request
-
批改包文件外面的代码,这里咱们批改的目录是 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 将须要批改的文件代理到咱们本人的我的项目文件中,操作步骤如下:
-
找到他人源码外面的须要批改的文件,复制到 src 目录
-
批改代码,留神外面援用其余的文件门路都须要改成绝对路径
-
找到这个模块被引入的门路( 咱们须要拦挡的门路 )
-
配置 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,具体步骤如下:
-
全局装置 Yarn 的最新版本:
npm install -g yarn
,这里阐明一下,如果你之前装置的是应用程序版本,须要先卸载之后再运行这个命令,不然装置实现之后还是之前的 yarn 版本。 -
进入你的我的项目目录,运行
yarn set version berry
命令。 -
执行
yarn patch request
命令 -
在如上图所示文件门路中批改代码
-
在你的我的项目根目录新建一个 patches 文件夹,执行
yarn patch-commit C:UsersTWITTY~1AppDataLocalTempxfs-f6241b39 > E:vue-cli4patchesrequest+2.88.2.patch
,这样你就能在 patches 文件下看到生成了一个 request+2.88.2.patch 文件,外面保留有你方才批改代码的 diff 内容。 -
批改 package.json 文件如下:
- "request": "^2.88.2" + "request": "patch:request@^2.88.2#./patches/request+2.88.2.patch"
-
从新运行 yarn 和 启动我的项目,你就能看到依赖包代码批改之后的变动
这种方法解决了上述更新和团队成员同步问题,毛病是操作起来比拟繁琐,还得依赖 v2 版本的 yarn。
yarn patch 可能呈现的问题:
-
运行
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
-
运行
yarn patch request
命令时,如果呈现以下这种状况,则须要删除 yarn.lock 文件,从新执行yarn install
。具体能够参考我的另一篇文章—记录一次应用 yarn patch 遇到的问题。
-
运行
yarn patch request
命令时,如果呈现以下这种状况,阐明有多个版本的包共存,你能够抉择你具体要批改的那个包版本,比方我想批改的是 request 的 2.88.2 版本,就执行yarn patch request@npm:2.88.2
。
patch-package
操作步骤如下:
-
批改 package.json 文件如下:
"scripts": {+ "postinstall": "patch-package"}
-
装置 patch-package:
npm i patch-package -S
-
在 node_modules 外面批改依赖包的代码
-
每次批改代码之后执行命令
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