Question

我在移动网站上工作（它不是单页应用），其JS足迹非常小（缩小和压缩不到10KB）。没有库或外部依赖项，所有代码都是内部编写的vanilla javascript。它在逻辑上分成几个文件，这些文件在deplyment之前连接在一起，以减少HTTP请求的数量。文件中没有明确的命名空间。也就是说，它们看起来像：

// crossbrowser.js
function getScrollOffset() {
    // implementation
}

function ...

这不太理想，没有明确的依赖解决方案，范围可以从函数内部轻松污染。没有处理来检查这个（lint或编译器）。作为第一步，我认为实现一个明确的模块系统可以防止这种情况并使代码更好。

根据我的理解，阅读CommonJS模块格式和诸如RequireJS，Lab.js等的加载器，在浏览器端使用模块时，他们都希望通过XHR加载它们。我不想要那个，我想保留包含所有模块的单一脚本格式。我的文件看起来像：

var define = function () { /* ... */ };
var require = function () { /* ... */ };
define("crossbrowser", function (require, exports, module) {
    exports.getScrollOffset = function() {
        //
    };

    // etc.
});

define("foo", function (require, exports, module) {
    var crossbrowser = require('crossbrowser');
    exports.getNewOffset = function () {
        var offset = crossbrowser.getScrollOffset();
        // do something
        return offset;
    }
});

window.addEventListener('DOMContentLoaded', function () {
    // really dumb example, but I hope it gets the point across
    var crossbrowser = require('crossbrowser'),
        foo = require('foo');
    crossbrowser.scrollTo(foo.getNewOffset());
});

问题是任何加载器都以这种方式工作，还是我必须编写自己的define和require实现？

Answer 1

像requirejs这样的加载器的一个好处是，您可以使用优化器在构建过程中将所有模块合并为一个缩小的脚本，请参阅RequireJS Optimizer

这将允许您以模块化结构进行开发，但部署优化版本

Answer 2

查看webmake。

Webmake允许在浏览器中使用CommonJS模块。所有js文件都合并到一个js文件中。装载机非常轻便。 Webmake也适用于CoffeeScript。

Answer 3

如果您不需要异步加载，则不需要AMD加载程序。例如，如果使用r.js组合模块，则必须在生产代码中加载整个RequireJS库。为什么不简单地使用编译器？只需查看CommonJS编译器http://www.slideshare.net/dsheiko/modular-javascript-with-commonjs-compiler上的幻灯片，这里有来源/文档http://dsheiko.github.io/cjsc/

CommonJS模块加载器，不进行异步调用

3 个答案: