专门做餐厅设计的网站,wordpress怎么用畅言,衡水网站建设怎么做,网站界面设计案例教程文章目录 一、前言二、补丁方案2.1、patch-package2.2、pnpm patch 三、换日方案四、总结五、最后 一、前言
在开发过程中#xff0c;发现某个npm包有Bug#xff0c;应该怎么办#xff1f;可以试试下面这2种方案#xff1a; 代码量少#xff0c;可以直接修改npm包代码的patch-package2.2、pnpm patch 三、换日方案四、总结五、最后 一、前言
在开发过程中发现某个npm包有Bug应该怎么办可以试试下面这2种方案 代码量少可以直接修改npm包代码的考虑补丁方案。代码量多或者npm包代码是压缩混淆过的不具备修改条件。修改源码后再修改包名重新发布在应用代码中更换引用。为叙文方便我将这种方案命名为换日方案偷天换日李代桃僵。 二、补丁方案
2.1、patch-package
patch-package是一个用于修复第三方依赖包的工具使用方式非常简单。 它支持npm和yarn v1如果是yarn v2或者pnpm则使用自带的patch方案下文会介绍pnpm方案。 安装
$ npm i patch-package
$ yarn add patch-package postinstall-postinstall如果只是前端使用可以添加--dev或-D参数。如果是后端使用为保障生产模式会去除devDendencies依赖也能正常使用就不要加了。 在node_modules中找到你要修改的npm包修改内容后就可以运行patch-package创建patch文件了。
$ npx patch-package package-name # 使用npm
$ yarn patch-package package-name # 使用yarn运行后会在项目根目录下创建一个patches文件夹并生成一个名为package-nameversion.patch的文件。将该patch文件提交至版本控制中即可在之后应用该补丁了。
以我修改的verdaccio为例会生成一个verdaccio4.4.0.patch的文件内容大致如下
diff --git a/node_modules/verdaccio/build/index.js b/node_modules/verdaccio/build/index.js
index 3a79eaa..d00974b 100644
--- a/node_modules/verdaccio/build/index.jsb/node_modules/verdaccio/build/index.js-5,6 5,8 Object.defineProperty(exports, __esModule, {});exports.default void 0;console.log(---------------)
var _bootstrap require(./lib/bootstrap);完成上述操作后最后在package.json的scripts中加入postinstall: patch-package。
scripts: {postinstall: patch-package
}这样当其他同事拉下代码运行npm install或是yarn install命令时便会自动为依赖包打上我们的补丁了。 简单来说这个方案的原理就是记录补丁的代码与位置利用npm的hookpostinstall会在npm install后触发在安装完依赖以后触发相应的脚本将补丁覆盖到node_modules对应的包里。 当然补丁是对应具体版本的需要锁定版本号。这样的缺点是如果要升级的话还得重新来一遍不过不是有Bug或性能问题通常不必追求新的版本。 2.2、pnpm patch
pnpm的patch自称灵感来自yarn的类似命令。由于yarn v2可能走了邪路我们就不介绍了。
首先执行pnpm patch pkg nameversion。该命令会将指定的软件包提取到一个可以随意编辑的临时目录中。
完成修改后, 运行pnpm patch-commit path(是之前提取的临时目录这个临时目录会长到你根本记不住不过不用担心命令行里会有完备的提示) 以生成一个补丁文件并提供patchedDependencies 字段注册到你的项目中。
比如我想修改一个is-even的包
pnpm patch is-even
You can now edit the following folder: /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/29ba74c7c7ffd7aa157831c6436d3738Once youre done with your changes, run pnpm patch-commit /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/29ba74c7c7ffd7aa157831c6436d3738按照提示打开这个文件夹加一行代码 执行上面控制台的提示
pnpm patch-commit /private/var/folders/sq/0jfgh1js6cs8_31df82hx3jw0000gn/T/e103de90617a18eee7942d1df35a2c48
Packages: -1
-
Progress: resolved 5, reused 6, downloaded 0, added 1, done这时你会发现package.json中多了一段内容
pnpm: {patchedDependencies: {is-even1.0.0: patches/is-even1.0.0.patch}
}根目录下也多了个文件夹patches打开以后你就能找到添加的代码 打开node_modules/is-even/index.js可以看到已经多了我们添加的代码 删除node_modules重新pnpm i安装依赖仍然与现在一样这就代表成功了。
整个流程下来我们看得出来相比于patch-package要稍微复杂点儿但也是可以接受的。 注意patches目录是一定得提交到git的。 三、换日方案
如果要修改的代码较多或者不具备修改条件这时就需要修改源码。到GitHub上找到npm包的源码Fork该项目修改代码后再修改包名重新发布比如你要修改的包是lodash可以修改为awesome-lodash在应用代码中更换引用。
本来这个方案没什么好说的但有一种情况如果你修改的是个底层包也就是说并不是你的应用代码中直接引用的而是你引用的npm包A所依赖的甚至可能同时被包B依赖的这时就比较尴尬了你不可能再去修改A和B的源码那就太不值当了。
pnpm提供了一种别名Aliases的能力。
假设你发布了一个名为awesome-lodash的新包并使用lodash作为别名来安装它
$ pnpm add lodashnpm:awesome-lodash不需要更改代码所有的lodash引用都被解析到了awesome-lodash。就这么简单上面说的问题就解决了。
再说点儿题外话有时你会想要在项目中使用一个包的两个不同版本很简单
$ pnpm add lodash1npm:lodash1
$ pnpm add lodash2npm:lodash2现在您可以通过 require(lodash1) 引入第一个版本的 lodash 并通过 require(lodash2) 引入第二个。
与pnpm的钩子结合使用功能会更加强大比如你想将node_modules里所有的lodash引用也替换为awesome-lodash你可以用下面的.pnpmfile.cjs 轻松实现
function readPackage(pkg) {if (pkg.dependencies pkg.dependencies.lodash) {pkg.dependencies.lodash npm:awesome-lodash^1.0.0}return pkg
}module.exports {hooks: {readPackage}
}四、总结
在开发过程中发现npm包的Bug首先向原作者提交issue或Fork代码修改后提交合并请求。但遇到不活跃或拒绝修改的情况项目等待时间会很长。这时可以使用补丁方案或换日方案进行解决。
补丁方案中如果是npm或yarn v1可以使用patch-package工具包处理如果是yarn v2或pnpm可以使用各自的patch命令。
换日方案则是修改源码发布新的npm包后利用pnpm的别名功能将所有依赖原npm包的地方全部替换为新的包。
这种场景在日常开发中还是比较常见的这里为大家提供一种思路。当然如果真是个Bug别忘了提issue或PR为开源贡献自己的一份力量在与作者的沟通交流中相信你也能受益匪浅。
五、最后
本人每篇文章都是一字一句码出来希望对大家有所帮助多提提意见。顺手来个三连击点赞收藏关注✨一起加油☕
