使用 webpack 引用 zepto
作者:陈家宾 日期:2017-12-15
背景
由于 zepto 库本身不支持 CommonJs 规范,不支持 import/export,所以不能直接以 import 的形式引入,所以这里需要做一些特殊处理
处理方法
方法一:引用 zepto-webpack 库
安装
npm i -D zepto-webpack
引用
import $ from 'zepto'
原理
这个库对 zepto 做了一丢丢的改造,加了一行代码,使其支持 import/export
at line 887 I add:module.exports = window.Zepto;
方法二:用 webpack 的 loader 对 zepto 库进行改造
安装
npm i -D script-loader exports-loader
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).js 引用
import $ from 'zepto'
原理
- [script-loader] 用 eval 的方法将 zepto 在引入的时候执行了一遍,此时 zepto 库已存在于 window.Zepto
- [exports-loader] 将传入的 window.Zepto 以
module.exports = window.Zepto
的形式向外暴露接口,使这个模块符合 CommonJS 规范,支持 import
参考资料
- webpack 中文文档, webpack v3.10.0, https://doc.webpack-china.org...
- 《如何在 webpack 中引入未模块化的库,如 Zepto》, 大灰狼的小绵羊哥哥, 2017-04-23 13:43,http://blog.csdn.net/sinat_17...
相关推荐
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gloria0 2020-10-26
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18
81463166 2020-07-17