修改node_modules的包

为啥要修改

---

有时候使用npm上的包，发现有bug，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。

那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装依赖就没有了。

一般常用办法有两个：

• 下载别人代码到本地，放在src目录，修改后手动引入。
• fork别人的代码到自己仓库，修改后，从自己仓库安装这个插件。

这两个办法的缺陷就是：

• 更新麻烦，我们每次都需要手动去更新代码，无法与插件同步更新。
• 如果我们要修改的代码仅仅是别人的一个小模块，其他大部分代码都不动，这时候有一个很投机的操作：利用 webpack alias 来覆盖别人代码。

webpack alias会替换我们写的“简写路径”，并且它对node_modules里面的文件也是生效的。 我们可以将别人源码里面引用模块的路径替换成我们自己的文件。

chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('#', resolve('src/views/page1'))
      .set('&', resolve('src/views/page2'));
},

💡 具体操作如下：

1. 找到别人源码里面的需要修改的模块，复制代码到src目录
2. 修改其中的bug，注意里面引用其他的文件都需要写成绝对路径
3. 找到这个模块被引入的路径（我们需要拦截的路径）
4. 配置webpack alias </aside>

实际操作

// qiankun
// 新建文件 src/assets/patchers.js

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

/**
 * @author Kuitos
 * @since 2019-04-11
 */
import { SandBoxType } from 'qiankun/es/interfaces';
import patchDynamicAppend from 'qiankun/es/sandbox/patchers/dynamicAppend';
import patchHistoryListener from 'qiankun/es/sandbox/patchers/historyListener';
import patchInterval from 'qiankun/es/sandbox/patchers/interval';
import patchWindowListener from 'qiankun/es/sandbox/patchers/windowListener';
import patchUIEvent from 'qiankun/es/sandbox/patchers/UIEvent';

console.log('patchers.js');

export function patchAtMounting(appName, elementGetter, sandbox, singular) {
  var _patchersInSandbox;

  var _a;

  var basePatchers = [function () {
    return patchInterval();
  }, function () {
    return patchWindowListener();
  }, function () {
    return patchHistoryListener();
  }, function () {
    return patchDynamicAppend(appName, elementGetter, sandbox.proxy, true, singular);
  }];
  var patchersInSandbox = (_patchersInSandbox = {}, _defineProperty(_patchersInSandbox, SandBoxType.LegacyProxy, [].concat(basePatchers, [function () {
    return patchUIEvent(sandbox.proxy);
  }])), _defineProperty(_patchersInSandbox, SandBoxType.Proxy, [].concat(basePatchers, [function () {
    return patchUIEvent(sandbox.proxy);
  }])), _defineProperty(_patchersInSandbox, SandBoxType.Snapshot, basePatchers), _patchersInSandbox);
  return (_a = patchersInSandbox[sandbox.type]) === null || _a === void 0 ? void 0 : _a.map(function (patch) {
    return patch();
  });
}
export function patchAtBootstrapping(appName, elementGetter, sandbox, singular) {
  var _patchersInSandbox2;

  var _a;

  var basePatchers = [function () {
    return patchDynamicAppend(appName, elementGetter, sandbox.proxy, false, singular);
  }];
  var patchersInSandbox = (_patchersInSandbox2 = {}, _defineProperty(_patchersInSandbox2, SandBoxType.LegacyProxy, basePatchers), _defineProperty(_patchersInSandbox2, SandBoxType.Proxy, basePatchers), _defineProperty(_patchersInSandbox2, SandBoxType.Snapshot, basePatchers), _patchersInSandbox2);
  return (_a = patchersInSandbox[sandbox.type]) === null || _a === void 0 ? void 0 : _a.map(function (patch) {
    return patch();
  });
}

配置webpack

const path = require('path');
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))
  }
};

使用

import { patchAtBootstrapping } from "./patchers";

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your teamhttps://serious-lose.notion.site/node_modules-14c7c8c524424f1cb79b14703b097439