有哪些Gulp或Grunt插件可以将AMD模块编译成无需AMD加载器的普通JS形式?
开发一个组件供他人引入使用,使用时自然只需引入 组件.js 一个文件
<script type="组件.js"></script>
若组件规模较大,行数也多,希望在开发时候把组件分成很多AMD模块来管理。
但是这样如何让没有引入RequireJS等的用户使用该组件呢?
我观察到jQuery也是在开发时候使用RequireJS,但最终会通过他们自己写的build编译成一个不需带RequireJS的jquery.js文件。
目前有哪些Grunt和Gulp插件是做这种事的呢?把AMD模块编译成无需AMD加载器的普通js。
update:
举个例子解释一下:
现在需要开发一个组件demo,组件包含A和B两大功能,由于代码非常多,开发时使用了RequireJS:
define(function() {
//A功能
});
define(function() {
//B功能
});
define(["A", "B"], function(aa, bb) {
//demo组件入口
aa.xxxx()...
bb.xxxx()...
});
现在希望用户只引入一个demo.js文件便可调用该组件,可以是暴露在全局的window.demo:
//用户没有使用RequireJS。
<script type="demo.js"></script>
<script>
window.demo.abc();
</script>
既然要这么使用,就不得不把开发时的A.js,B.js和入口.js编译成一个非AMD的demo.js文件,不带define关键字,不依赖RequireJS:
//编译后可能长这样:
(function() {
xxxxxx();
xxxxxx();
//这里使用UMD写法也一样
window.demo = demo;
})();
那么问题来了,如何将上面的A.js,B.js等等AMD模块编译成下面这种非AMD模块?做到开发时引用RequireJS而上线时不引用RequireJS?
update:
jQuery源码部分目录结构,src目录是jQuery的各个小模块:
随手贴几个模块源码看看。jQuery Ajax源码:
jQuery事件源码:
可以看到,jQuery内部也是使用RequireJS做模块加载的,但我们下载到的最终版jQuery里却没有这些模块定义,没有这么多define,因为jQuery作者使用Grunt将这几十个小模块打包成一个最终版jQuery,里面已经解析出依赖并用正则等手段替换掉define关键字,但是这个Grunt插件似乎只是专门为jQuery打造。
所以我想问的是,有没有其他Grunt和Gulp插件是干这件事的,可以把AMD模块转为非AMD模块?还是说这件事是没办法做到通用的的,只能自己写针对每个不同的项目写Grunt和Gulp插件来打包?
模块化 前端 web JavaScript requirejs
Answers
这种事情通常不会用插件来做,具体原因要分两种情况来说:
-
针对开源的 amd 兼容模块:一般来说这种模块都是直接有暴露全局对象以供没有 amd 加载器的情形使用。暴露的方法很简单,判断有没有 amd 加载器的特征对象,比如 define 方法,若无则直接暴露给全局。如果你写的模块需要开源出去给所有人使用,则应该由你来完成这个工作而不是让用户去依赖插件,否则不用 grunt 等工具的人该怎么办?
-
自己写的模块,同样的道理,暴露非模块化接口的责任应该在开发者这里而不要转嫁给使用者。
所以你看到像 jQuery 这样的东东就是自己处理的,并且处理这种事情并不难,若你要开发模块你也应该如此。虽然不是说完全没有办法写插件,但毕竟通用性与可靠性难以保障,更重要的是这个责任应该属于你而不是转嫁给他人。
如果你恰好用了没有这么做的开源模块,那就赶紧提 issue 或 pr 吧。