javascript - 不进行异步调用的 CommonJS 模块加载器

Question

我正在开发一个移动网站(它不是单页应用程序)，该网站的 JS 占用空间非常小(缩小和压缩后小于 10KB)。没有库或外部依赖项，所有代码都是内部编写的普通 JavaScript。它在逻辑上分为几个文件，这些文件在部署之前连接起来，以减少 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

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