使用webpack引入 zepto

背景

由于 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;

如果你不想写 import $ from ‘zepto’，并且想用其他变量来代替 Zepto。 可以使用官方的一个插件：webpack.ProvidePlugin。

webpack.ProvidePlugin 是一个依赖注入类型的插件，可以让你在使用指定变量时，比如直接使用 $ 时，自动加载指定的模块 zepto，并将其暴露的对象赋值给 $：

plugins: [
    new webpack.ProvidePlugin({
      $: 'zepto',
      // 把 Zepto 导入为 z 变量也可以
      z: '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'

##原理
[script-loader] 用 eval 的方法将 zepto 在引入的时候执行了一遍，此时 zepto 库已存在于 window.Zepto
[exports-loader] 将传入的 window.Zepto 以 module.exports = window.Zepto 的形式向外暴露接口，使这个模块符合 CommonJS 规范，支持 import