webpack如何支持未实现模块化的类库如zepto.js(未实现commonjs规范)

原创 fantasy525 随笔 webpack 140阅读 2017-05-05 15:47:54 举报

公司之后的移动端主要用zepto.js来作为基础类库,但是它只实现了amd模块化规范,使用webpack时就必须的按照amd规范来写了,如何实现还能继续按照commonjs规范来写呢,这里我自我感觉可以改造zepto的源码嘛,因为我看支持commonjs还是支持amd最后都会有一些判断来导出类库比如我在iscroll.js的代码最后就看到了这样几行代码
javascript 代码

这里意思是选择性的导出这个大的插件类,支持amd ,commonjs,还有最原始的作为window的全局变量,本来想改zepto的源码加上这句话后来发现我下载的是min版,没法改,那就只能找其他办法了,根据网友的介绍可以利用两个loader:exports-loader 和 script-loader。
1.script-loader 可以在我们 import/require 模块时,在全局上下文环境中运行一遍模块 JS 文件(不管 require 几次,模块仅运行一次)。
script-loader 把我们指定的模块 JS 文件转成纯字符串,并用 eval.call(null, string) 执行,这样执行的作用域就为全局作用域了。
但如果只用 script-loader,我们要导入 Zepto 对象就需要这么写:
javascript 代码

这样的写法就是:当 webpack 初始化(webpackBootstrap)时,zepto.js 会在全局作用域下执行一遍,将 Zepto 对象赋值给
window.$ 并挂载到 window 上。因此后续的 $、Zepto 变量就都可用了。
这个方法我感觉就是先执行一遍zepto.js然后就把$挂在到全局了
2.export-loader:它可以再模块闭包的最后加一句话module.exports = window.Zepto来导出我们需要的对象,这样就可以require('zepto')了
看下webpack配置
javascript 代码

这样我们在页面入口文件中就可以这么写:
javascript 代码

参考了这篇文章:原文地址

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复