使用 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...
阅读 4.1k

推荐阅读