有哪些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

栐恆D噓箜 10 years, 5 months ago

webpack和borwserify

古戶绘梨花 answered 10 years, 5 months ago

这种事情通常不会用插件来做,具体原因要分两种情况来说:

  1. 针对开源的 amd 兼容模块:一般来说这种模块都是直接有暴露全局对象以供没有 amd 加载器的情形使用。暴露的方法很简单,判断有没有 amd 加载器的特征对象,比如 define 方法,若无则直接暴露给全局。如果你写的模块需要开源出去给所有人使用,则应该由你来完成这个工作而不是让用户去依赖插件,否则不用 grunt 等工具的人该怎么办?

  2. 自己写的模块,同样的道理,暴露非模块化接口的责任应该在开发者这里而不要转嫁给使用者。

所以你看到像 jQuery 这样的东东就是自己处理的,并且处理这种事情并不难,若你要开发模块你也应该如此。虽然不是说完全没有办法写插件,但毕竟通用性与可靠性难以保障,更重要的是这个责任应该属于你而不是转嫁给他人。

如果你恰好用了没有这么做的开源模块,那就赶紧提 issue 或 pr 吧。

櫛枝.实乃梨 answered 10 years, 5 months ago

Your Answer