使用 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/configuration/module/#rule-use
2. 《如何在 webpack 中引入未模块化的库，如 Zepto》, 大灰狼的小绵羊哥哥, 2017-04-23 13:43，http://blog.csdn.net/sinat_17775997/article/details/70495891