第三方包补丁方案(优雅修改node_modules)

一、背景

我们在平时开发过程中可能会遇到以下问题
● 开源npm包不能满足我们实际预期，需要个性化支持
● 开源的npm包存在一些小小的bug，需要修复
而我们只需要对源码进行小小的改动就能满足我们的需求，这个时候我们该怎么办？

二、以往方案分析

方案一：在项目的node_modules下找到插件的源码直接修改
优点：简单直接、快速见效
缺点：不能持久化，一旦重新安装就失效
方案二：去github上fork第三方包代码进行修改，将修改过后的代码发布到公司私服npm上使用
优点：可持久化，项目成员都可以使用到这份修改的代码
缺点：无法追溯修改历史，无法形成git记录
方案三：去github上fork第三方包代码进行修改，将我们贡献的内容提交给开源作者
优点：让项目/软件变得更完善，便于社区所有人适用
缺点：不适用于特定需求，且时间战线较长

三、推荐方案patch-package

1.安装patch-package

npm i patch-package --save-dev  // npm 安装

2.根据需求，修改npm包

3.生成补丁文件

npx patch-package package-name  //运行命令该命令， package-name为你修改的npm包名。

如：npx patch-package vux

执行完成，会看到根目录多了一个patches文件夹，里面包含了所修改的npm包的patch文件, 如 vux+2.9.2.patch
文件名中的2.9.2是依赖包的版本号，表示这个补丁只对2.9.2版本的该npm插件生效

可以看到vux+2.9.2.patch 中记录着修改内容。

4.修改package.json文件，设置postinstall钩子

"scripts": {
    "dev": "node build/dev-server.js",
    "build:dev": "node --max_old_space_size=4096 build/dev-deploy.js",
    "build:test": "node --max_old_space_size=4096 build/test.js",
    "build:uat": "node --max_old_space_size=4096 build/uat.js",
    "build:prod": "node --max_old_space_size=4096 build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "lint": "eslint --fix --ext .js,.vue src",
  + "postinstall": "patch-package"
 },

● postinstall：每次npm install 安装完依赖后，将会执行此条脚本命令

5.解决流水线postinstall不能执行问题
云效流水线执行postinstall 会报cannot run in wd 错误。
解决方案：在根目录添加一个 .npmrc 文件，增加 unsafe-perm = true ，注入环境变量

6.测试
删除node_module并重新安装项目依赖，依赖包安装完成后可以打开node_modules中查看对应文件是否有相关修改变动。