使用 patch-package 修改第三方模块
前言
在开发过程中,我们安装的依赖包可能有bug存在,比如性能问题;对依赖包进行优化后重新安装依赖我们的修改就丢失了;针对这个问题: 可以使用 patch-package 修改第三方模块,及时解决第三方依赖包的 bug;
安装
npm install patch-package postinstall-postinstall --save-dev
创建补丁
在项目根目录下的 node_modules 文件夹中找到要修改依赖包的相关文件,然后回到根目录执行;
# npm > 5.2
npx patch-package package-name
package-name
是要修改的依赖包名
执行完成后,会在项目根目录的 patches 目录中创建补丁文件 package-name+5.5.1.patch(5.5.1 是依赖包版本),这个补丁需要提交到代码仓库中;
一个简单的例子
我遇到的问题是 React suite
框架中 tree-table 组件大数据量时,开合有性能缺陷,以此为例:
-
前期准备
- 创建一个项目(以 React 为例)
npx create-react-app demo
- 安装 rsuite 依赖
cd demo npm install rsuite npm install patch-package --save-dev
至此,我们得到了一个新的 React 项目,并且安装了 rsuite 依赖;
- 创建一个项目(以 React 为例)
-
修改依赖库代码
- node_modules\rsuite-table\es\Table.js
var filterTreeData = function filterTreeData(data, expandedRowKeys, rowKey) { var expandedSet = new Set(expandedRowKeys); // 新增 return flattenData(data).filter(function (rowData) { if (rowKey) { var parents = findAllParents(rowData, rowKey); // var _expanded = shouldShowRowByExpanded(expandedRowKeys, parents); var _expanded = shouldShowRowByExpanded(expandedSet, parents); rowData[EXPANDED_KEY] = _expanded; rowData[TREE_DEPTH] = parents.length; return _expanded; } }); };
- node_modules\rsuite-table\es\utils\shouldShowRowByExpanded.d.ts
// export default function shouldShowRowByExpanded(expandedRowKeys?: RowKeyType[], parentKeys?: RowKeyType[]): boolean; export default function shouldShowRowByExpanded(expandedRowKeys?: Set<RowKeyType>, parentKeys?: RowKeyType[]): boolean;
- node_modules\rsuite-table\es\utils\shouldShowRowByExpanded.js
export default function shouldShowRowByExpanded(expandedRowKeys, parentKeys) { if (expandedRowKeys === void 0) { expandedRowKeys = []; } if (parentKeys === void 0) { parentKeys = []; } for (var i = 0; i < ((_parentKeys = parentKeys) === null || _parentKeys === void 0 ? void 0 : _parentKeys.length); i++) { var _parentKeys, _expandedRowKeys; // if (((_expandedRowKeys = expandedRowKeys) === null || _expandedRowKeys === void 0 ? void 0 : _expandedRowKeys.indexOf(parentKeys[i])) === -1) { if (!((_expandedRowKeys = expandedRowKeys) !== null && _expandedRowKeys !== void 0 && _expandedRowKeys.has(parentKeys[i]))) { return false; } } return true; }
- node_modules\rsuite-table\es\Table.js
-
打补丁
npx patch-package rsuite-table
得到一个名为 rsuite-table+5.5.1.patch的文件
demo\patches\rsuite-table+5.5.1.patch
点击查看rsuite-table+5.5.1.patch
diff --git a/node_modules/rsuite-table/es/Table.js b/node_modules/rsuite-table/es/Table.js index cdfccfa..8f0a194 100644 --- a/node_modules/rsuite-table/es/Table.js +++ b/node_modules/rsuite-table/es/Table.js @@ -23,11 +23,12 @@ import { mergeCells, flattenData, isRTL, findRowKeys, findAllParents, shouldShow * @returns */ var filterTreeData = function filterTreeData(data, expandedRowKeys, rowKey) { + var expandedSet = new Set(expandedRowKeys); return flattenData(data).filter(function (rowData) { if (rowKey) { var parents = findAllParents(rowData, rowKey); - var _expanded = shouldShowRowByExpanded(expandedRowKeys, parents); + var _expanded = shouldShowRowByExpanded(expandedSet, parents); rowData[EXPANDED_KEY] = _expanded; rowData[TREE_DEPTH] = parents.length; diff --git a/node_modules/rsuite-table/es/utils/shouldShowRowByExpanded.js b/node_modules/rsuite-table/es/utils/shouldShowRowByExpanded.js index 47593eb..5cbf6bc 100644 --- a/node_modules/rsuite-table/es/utils/shouldShowRowByExpanded.js +++ b/node_modules/rsuite-table/es/utils/shouldShowRowByExpanded.js @@ -6,7 +6,7 @@ */ export default function shouldShowRowByExpanded(expandedRowKeys, parentKeys) { if (expandedRowKeys === void 0) { - expandedRowKeys = []; + expandedRowKeys = new Set(); } if (parentKeys === void 0) { @@ -16,7 +16,7 @@ export default function shouldShowRowByExpanded(expandedRowKeys, parentKeys) { for (var i = 0; i < ((_parentKeys = parentKeys) === null || _parentKeys === void 0 ? void 0 : _parentKeys.length); i++) { var _parentKeys, _expandedRowKeys; - if (((_expandedRowKeys = expandedRowKeys) === null || _expandedRowKeys === void 0 ? void 0 : _expandedRowKeys.indexOf(parentKeys[i])) === -1) { + if (!((_expandedRowKeys = expandedRowKeys) !== null && _expandedRowKeys !== void 0 && _expandedRowKeys.has(parentKeys[i]))) { return false; } }
部署
在 package.json
的 scripts 中加入 "postinstall": "patch-package"
,后续执行 npm install
或 yarn install
命令时,会自动为依赖包打补丁了;
拓展
--reverse
撤回所有补丁
Note: 如果打补丁后,补丁文件被修改过,此操作将失败,此时可以重新安装 node_modules--patch-dir
指定补丁文件所在目录
参考资料
https://github.com/ds300/patch-package
原文地址: 使用 patch-package 修改第三方模块