使用 webpack 引用 zepto

做者：陳家賓
日期：2017-12-15

背景

因爲 zepto 庫自己不支持 CommonJs 規範，不支持 import/export，因此不能直接以 import 的形式引入，因此這裏須要作一些特殊處理

處理方法

方法一：引用 zepto-webpack 庫

1. 安裝

   npm i -D zepto-webpack

2. 引用

   import $ from 'zepto'

原理

這個庫對 zepto 作了一丟丟的改造，加了一行代碼，使其支持 import/export

at line 887 I add:

module.exports = window.Zepto;

方法二：用 webpack 的 loader 對 zepto 庫進行改造

1. 安裝

   npm i -D script-loader exports-loader

2. webpack 配置

   module: {
       rules: [{
           test: require.resolve('zepto'),
           use: ['exports-loader?window.Zepto','script-loader']
       }]
   }

   require.resolve() 是 nodejs 用來查找模塊位置的方法，返回模塊的入口文件

   Loaders can be chained by passing multiple loaders, which will be applied from right to left (last to first configured).

3. js 引用

   import $ from 'zepto'

原理

1. [script-loader] 用 eval 的方法將 zepto 在引入的時候執行了一遍，此時 zepto 庫已存在於 window.Zepto
2. [exports-loader] 將傳入的 window.Zepto 以 module.exports = window.Zepto 的形式向外暴露接口，使這個模塊符合 CommonJS 規範，支持 import

參考資料

1. webpack 中文文檔, webpack v3.10.0, https://doc.webpack-china.org...
2. 《如何在 webpack 中引入未模塊化的庫，如 Zepto》, 大灰狼的小綿羊哥哥, 2017-04-23 13:43，http://blog.csdn.net/sinat_17...