為啥要修改

有時候使用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