研究了一下 Webpack 打包原理，順手掙了個 AirPods Pro

李中凱發表於2021-03-01
WebAI

這些年，Webpack 基本成了前端專案打包構建的標配。關於它的原理和用法的文章在網上汗牛充棟，大家或多或少都看過一些。我也一樣，大概瞭解過它的構建過程以及常用 loader 和 plugin 的配置、效能優化方法等等，僅限於“面試夠用”的程度。在實際工作中，往往是配置好後就放一邊了，沒有遇到問題是不會再碰它的。

我一直有個習慣（或者叫毛病），就是不太願意花時間去研究暫時用不上的技術。我稱其為“屠龍之技”：學會了屠龍的技術，可是找不到龍啊。這樣的技術沒有實際應用來強化，過不了多久就會荒廢的。也因為這個，之前面試吃過很多虧，畢竟由於平臺所限，工作中根本接觸不到某些方面的技術。不過話又說回來，為了面試也要去學，硬著頭皮的那種。

扯遠了，說回正題。前不久，網上有個哥們通過我的一篇部落格找到我，讓我幫他解決一個問題。這篇部落格是關於如何在現有 Vue.js 專案裡快速實現多語言切換的。他的專案也遇到同樣的問題，但是他不懂程式碼，想付費求助。

按照我的方法，應該能很快完成需求。我大概估算了下工作量，報了個價。但是後面瞭解到的情況讓我大跌眼鏡：他的專案是打包好的，沒有原始碼！說原來的開發不在了，都聯絡不上，找不到原始碼。要在沒有原始碼的已有專案上加功能，寫程式碼這麼多年，還是第一次碰到。

我那篇文章的方案，是重寫 Vue.prototype.__patch__ 方法，攔截 DOM 渲染過程，將翻譯後的文字替換上去。面對一坨可讀性極差的壓縮程式碼，還怎麼寫下去？當時他還沒付款，我本打算放棄了。直到晚上睡覺前，這個問題一直盤旋在腦海裡，揮之不去。難道我的方案有這麼大的侷限性？很不服氣啊！

沒想到第二天，突然開竅了。這個問題的核心，不就是從壓縮程式碼裡找到 Vue 的引用嗎？剩下的邏輯，都可以通過注入自己的 JS 程式碼來完成。

明確了這個思路，就開始了壓縮程式碼挖掘之旅。我們都知道，Vue 專案在打包構建後，會在 HTML 檔案裡注入幾個 JS 檔案，大概像這樣：

其中的 vendor.xxx.js 就包含了 Vue.js 框架程式碼。但我們知道，這樣構建出來的程式碼肯定是用了閉包，各個模組都被作用域遮蔽了，window下是訪問不到這些模組的。可以試試在控制檯輸入 Vue ，會提示 Uncaught ReferenceError: Vue is not defined。

這個時候就需要研究 Webpack 是怎麼打包的了。這裡的關鍵在 manifest.js 檔案，它是 Webpack 的執行時程式碼，定義了一個webpackJsonp函式，程式碼簡化後是這樣的：

(function(modules) {
  window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
    var moduleId, result;
    for (moduleId in moreModules) {
      if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        modules[moduleId] = moreModules[moduleId];
      }
    }
    if (executeModules) {
      for (i = 0; i < executeModules.length; i++) {
        result = __webpack_require__(executeModules[i]);
      }
    }
    return result;
  };
  var installedModules = {};

  function __webpack_require__(moduleId) {
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    var module = installedModules[moduleId] = {
      exports: {}
    };
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    return module.exports;
  }
})([]);

打包後就是通過這個函式來載入各個模組的。因此，只要找到 Vue 這個模組被打包後的 ID，就能通過它來獲取。再看看vendor.xxx.js這個檔案內容：

webpackJsonp([38], {
    "+abY": function(t, e, n) {
        "use strict";
        n("DmDj")("sup", function(t) {
            return function() {
                return t(this, "sup", "", "")
            }
        })
    },
    "+fX/": function(t, e, n) {
        var r = n("awYD")
          , i = n("JE6n")
          , o = n("0U5H")("match");
        t.exports = function(t) {
            var e;
            return r(t) && (void 0 !== (e = t[o]) ? !!e : "RegExp" == i(t))
        }
    },
  "IvJb": function(t, e, n) {
      // 這就是 Vue 框架程式碼
  }
)

可以看到各個模組就是一個個的function。通過 Vue 框架裡的一些關鍵字搜尋，找到了 Vue 打包後的 ID 是IvJb。因此只要呼叫webpackJsonp函式就能獲取 Vue變數：

var vue = webpackJsonp([], {}, ['IvJb']);
var __patch__ = vue.default.prototype.__patch__;
vue.default.prototype.__patch__ = function () {
var elm = __patch__.apply(this, arguments);
  var lang = getUrlParam('lang')
  if (lang) {
    //翻譯DOM裡的文字
    translate(elm, lang);
  }
  return elm;
};

關鍵問題解決了！通過同樣的辦法，還可以獲取 axios ，把 axios 的 baseUrl 改成了完整路徑方便本地除錯。剩下的工作就簡單了，一是多語言檔案文字翻譯，那都是體力活，就交給那哥們自己幹了。二是加一個語言切換選單，這個也不難，原生 DOM 操作而已，再稍微調下樣式就搞定了。

前前後後花了不到一天時間，完成了這個看似不可能的任務。由此可見，瞭解工具和框架的底層原理，對於解決特定問題有著決定性的作用。當然，Webpack 功能非常強大，底層邏輯比這裡說的複雜多了，我也沒有繼續深入研究。或許下次碰到問題時又是一次契機。

關於多語言切換的方案，參考我之前寫的部落格：現有 Vue.js 專案快速實現多語言切換的一種思路。

本文首發於公眾號 1024譯站

相關文章