[[383922]]

這些年，Webpack 基本成了前端項目打包構(gòu)建的標(biāo)配。關(guān)于它的原理和用法的文章在網(wǎng)上汗牛充棟，大家或多或少都看過一些。我也一樣，大概了解過它的構(gòu)建過程以及常用 loader 和 plugin 的配置、性能優(yōu)化方法等等，僅限于“面試夠用”的程度。在實際工作中，往往是配置好后就放一邊了，沒有遇到問題是不會再碰它的。

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

扯遠(yuǎn)了，說回正題。前不久，網(wǎng)上有個哥們通過我的一篇博客找到我，讓我?guī)退鉀Q一個問題。這篇博客是關(guān)于如何在現(xiàn)有 Vue.js 項目里快速實現(xiàn)多語言切換的。他的項目也遇到同樣的問題，但是他不懂代碼，想付費求助。

按照我的方法，應(yīng)該能很快完成需求。我大概估算了下工作量，報了個價。但是后面了解到的情況讓我大跌眼鏡：他的項目是打包好的，沒有源碼!說原來的開發(fā)不在了，也聯(lián)系不上，找不到源碼。要在沒有源碼的已有項目上加功能，寫代碼這么多年，還是第一次碰到。

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

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

明確了這個思路，就開始了壓縮代碼挖掘之旅。我們都知道，Vue 項目在打包構(gòu)建后，會在 HTML 文件里注入幾個 JS 文件，大概像這樣：

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

這個時候就需要研究 Webpack 是怎么打包的了。這里的關(guān)鍵在 manifest.js 文件，它是 Webpack 的運行時代碼，定義了一個webpackJsonp函數(shù)，代碼簡化后是這樣的：

(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; 
  } 
})([]); 

打包后就是通過這個函數(shù)來加載各個模塊的。因此，只要找到 Vue 這個模塊被打包后的 ID，就能通過它來獲取。再看看vendor.xxx.js這個文件內(nèi)容：

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 框架里的一些關(guān)鍵字搜索，找到了 Vue 打包后的 ID 是IvJb。因此只要調(diào)用webpackJsonp函數(shù)就能獲取 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; 
}; 

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

前前后后花了不到一天時間，完成了這個看似不可能的任務(wù)。由此可見，了解工具和框架的底層原理，對于解決特定問題有著決定性的作用。

當(dāng)然，Webpack 功能非常強大，底層邏輯比這里說的復(fù)雜多了，我也沒有繼續(xù)深入研究?；蛟S下次碰到問題時又是一次契機呢。

本文轉(zhuǎn)載自微信公眾號「1024譯站」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系1024譯站公眾號。