前言

最近我在研究多頁面 webpack 模組打包的完整解決方案時，發現用 import 匯入 Zepto 時，會報 Uncaught TypeError: Cannot read property 'createElement' of undefined 錯誤，導致無法愉快地使用 Zepto。在經過一番除錯和搜尋後終於找到了解決的辦法，並且對於所有不支援模組化的庫都可以用這種方法匯入模組。

原因

Zepto 的原始碼：

/* Zepto v1.2.0 - zepto event ajax form ie - zeptojs.com/license */
(function
 
(global, factory) {
  if (typeof define === 'function' && define.amd)
    define(function() { return factory(global) })
  else
    factory(global)
}(this, function(window) {
  var Zepto = (function() {

    // ...

    return $
  })()

  window.Zepto = Zepto
  window.$ === undefined &&
 
 (window.$ = Zepto)

  return Zepto
}))

可以看出，它只使用了 AMD 規範的模組匯出方法 define，沒有用 CommonJs 規範的方法 module.exports 來匯出模組，不過這不是造成報錯的原因。

先來看一下 webpack 執行模組的方法：

再來看一下在 webpack config 中不作任何處理，直接 import $ from 'zepto'，經過 webpack 轉換的 Zepto 的模組閉包：

以上程式碼是模組執行的閉包，化簡一下其實就是 webpack 把 AMD 規範的 define 方法轉換成了 module.export = factory(global)

在模組載入（import/require）時，webpack 會通過下面這種方法來執行模組閉包並匯入模組：

// The require function
function __webpack_require__(moduleId) {

  // Check if module is in cache
  if(installedModules[moduleId])
    return installedModules[moduleId].exports;

  // Create a new module (and put it into the cache)
  var module = installedModules[moduleId] = {
    exports: {},
    id: moduleId,
    loaded: false,
    hot: hotCreateModule(moduleId),
    parents: hotCurrentParents,
    children: []
  }

  // Execute the module function
  modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

  // Flag the module as loaded
  module.loaded = true

  // Return the exports of the module
  return module.exports
}

其核心在於 modules[moduleId].call，它會傳入新初始化的 module.exports 來作為模組閉包的上下文（context），並執行模組閉包來將模組暴露的物件加入到已載入的模組物件（installedModules）中。

所以對於 Zepto 來說，它初始化時使用的 this（見下圖）其實就是 module.exports，但這個 module.exports 沒有賦值過任何變數，即 Zepto 初始化使用的 this 為空物件。

所以 factory(global) 中 global 為空物件，Zepto 執行函式中的 window 也就變成了空物件，而 var document = window.document，這個 document 為 undefined，因此會造成 document.createElement 會報 TypeError。

解決方法

$ npm i -D script-loader exports-loader

要用到兩個 loader：exports-loader 和 script-loader。

script-loader

require("script!./zepto.js");  
// => execute file.js once in global context

script-loader 可以在我們 import/require 模組時，在全域性上下文環境中執行一遍模組 JS 檔案（不管 require 幾次，模組僅執行一次）。

script-loader 把我們指定的模組 JS 檔案轉成純字串，並用 eval.call(null, string) 執行，這樣執行的作用域就為全域性作用域了。

但如果只用 script-loader，我們要匯入 Zepto 物件就需要這麼寫：

// entry.js
/*
 * 不能使用 `import $ from 'zepto'`
 * 因為 zepto.js 執行後返回值為 undefined
 * 因為 module.exports 預設初始為空物件
 * 所以 $ 也為空物件
 */

$(function () { })

這樣的寫法就是：當 webpack 初始化（webpackBootstrap）時，zepto.js 會在全域性作用域下執行一遍，將 Zepto 物件賦值給 window.$ 並掛載到 window 上。因此後續的 $、Zepto 變數就都可用了。

不過這種持續依賴全域性物件的實現方法不太科學，還是將物件以 ES6 Module/CommonJs/AMD 方式暴露出來更好。

Note:

如果我們用的庫沒有把物件掛載到全域性的話，就沒法作為模組使用了（還是趁早提個 PR 模組化一下吧）。

exports-loader

為了讓我們的模組匯入更加地「模組化」，可以 import/require，而不是像上面那麼「與眾不同」，我們還需要 exports-loader 的幫助。

exports-loader 可以匯出我們指定的物件:

require('exports?window.Zepto!./zepto.js')  

他的作用就是在模組閉包最後加一句 module.exports = window.Zepto 來匯出我們需要的物件，這樣我們就可以愉快地 import $ from 'zepto' 了。

webpack 配置

廢話說了那麼多，終於可以告訴大家怎麼直接使用這兩個 loader 來「模組化」Zepto 了:

// webpack.config
{
  // ...
  module: {
    loaders: [{
      test: require.resolve('zepto'),
      loader: 'exports-loader?window.Zepto!script-loader'
    }]
  }
}

這樣我們在頁面入口檔案中就可以這麼寫：

// entry.js
import $ from 'zepto'

$(function () {
  // ...
})

Note: 
require.resolve() 是 nodejs 用來查詢模組位置的方法，返回模組的入口檔案，如 zepto 為 ./node_modules/zepto/dist/zepto.js。

其他

如果你不想寫 import $ from 'zepto'，並且想用其他變數來代替 Zepto。 
可以使用官方的一個外掛：webpack.ProvidePlugin。

webpack.ProvidePlugin 是一個依賴注入型別的外掛，可以讓你在使用指定變數時，比如直接使用 $ 時，自動載入指定的模組 zepto，並將其暴露的物件賦值給 $：

// webpack.config
{
  // ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'zepto',
      // 把 Zepto 匯入為 abc 變數也可以
      abc: 'zepto'
    })
    // ...
  ]
}

這樣就可以直接使用賦值了 Zepto 物件的 $/abc 變量了~

// entry.js
$(function () {
  // ...
  abc(document)
})

如果不想這麼麻煩地用兩個 loader 來解決問題，可以把不支援模組化的庫模組化，比如用這個 npm 包：webpack-zepto。

但這個包已經一年多沒更新了，所以我更推薦上面比較麻煩的做法來確保引入的模組是最新的。

總結

由於我們用 npm 下載的模組沒有模組化，因此我們要使用：

1. script-loader 全域性上下文環境中執行模組 JS 檔案；
2. exports-loader 新增 module.exports 來主動暴露需要的物件，使其模組化。

這樣的方法適用於所有的庫，不過最好的解決辦法是從根本上讓這些讓這些庫支援模組化。

參考