如何微调和修改前端依赖包

0. 起因

最近工作中要对系统做整体重构,在重构过程中发现有些依赖功能不足,我们需要对其做适当修改,目前实践了 2 种方式作为依赖微调如下:

1. 通过脚本在 postinstall 阶段去替换现有的文件,或者替换字符串;
2. 通过 patch-package 直接在 node_modules 修改文件,然后 patch-package 生成 patch 文件,在 postinstall 阶段,再 patch 回去;
3. 通过 webpack 打包工具中的 alias 把原本依赖替换成新的依赖包;

1. 脚本替换处理

脚本替换处理是比较粗糙的替换手段

1.1 替换脚本编写 replace.sh

#!/bin/bash
folder="node_modules/some-package"
for file in $(find $folder -name "*.js")
do
  # Replace string
  sed -i 's/要被替换的文本/被替换的文本/g' $file
  
  echo "Replaced in $file"
done

1.2 配置 package.json

在 package.json 的 scripts 中增加一个 postinstall, 这样在项目安装依赖完成后会执行这个脚本

{
  "scripts": {
      "start": "echo start",
      "postinstall": "sh replace.sh"
  }
}

2. 使用 patch-package 更改

2.1 安装 patch-package 依赖

npm i patch-package --save-dev

2.2 修改依赖文件,并生成 patch 文件

1. 修改我们要更改的依赖包如 react-native-camera 中的文件并报存;
2. 执行 npx patch-package react-native-camera 生成 patch 文件

2.3 配置 package.json

在 package.json 的 scripts 中增加一个 postinstall, 这样在项目安装依赖完成后会执行这个脚本

{
  "scripts": {
      "start": "echo start",
      "postinstall": "patch-package"
  }
}

3. 使用 alias 替换依赖

使用 alias 替换依赖比较适合被更改的依赖比较底层,还有更改内容较多,还会编译出文件,这里介绍 antd 中依赖的基础组件 rc-dialog 的替换

3.1 首先在 github 先 fork 下来 dialog 的代码

3.2 拉取 fork 的仓库代码,并把自己需要的功能加上,更改 package.json 中的包名

3.3 更改完成后,把这个包构建并发布到 npm上

文件目录下执行 npm publish 发布版本到 npm 上

3.4 在要替换的项目中安装修改的这个依赖

在项目中安装依赖 npm install rc-cfhy-draggable-dialog

3.5 在 webpack 中配置 alias 项

通过下面的配置,这样项目中使用到 rc-dialog 的都会改为新的依赖 rc-cfhy-draggable-dialog,这样就满足了需求

alias: {
    '@': '/src',
    'rc-dialog': 'rc-cfhy-draggable-dialog'
  },

4. 参考引用

patch-package
Webpack 技巧 - 联合 alias 和 mainFields 提高多库联调效率