跨commonjs/浏览器开发的最佳实践

best practices for cross commonjs/browser development

本文关键字：最佳 开发 commonjs 浏览器      更新时间：2023-09-26

目前，我使用一些defines通过谷歌闭包编译器沿着IS_CJS和IS_BROWSER的行，只是有不同的文件得到构建(browser.myproject.js, cjs.myproject.js等)。

这是标准的做事方式吗?如果不是，它是什么，有什么好处?

对于浏览器和服务器代码都加载的库，我一直在我的所有项目中使用以下前言:

if (define === undefined) {
    var define = function(f) {
            require.paths.unshift('.');
            f(require, exports, module);
        };
}
define(function(require, exports, module) {
    ...
    // main library here
    ...
    // use require to import dependencies
    var v = require(something);
    ...
    // use exports to return library functions
    exports.<stuff> = { some stuff };
    ...
});

这可以用在我的节点服务器上运行的require(<library>)调用加载库，以及用RequireJS调用require(<library>)。在浏览器上，嵌套的require调用在库执行之前由RequireJS预先获取，在Node上这些依赖项是同步加载的。由于我没有将我的库用作独立脚本(通过html中的script标签)，而只是作为通过script标签加载的脚本的依赖项，因此这对我来说工作得很好。

然而，看看独立的库，下面的序言似乎是最灵活的。(从Q promise库中剪切粘贴

(function (definition, undefined) {
    // This file will function properly as a <script> tag, or a module
    // using CommonJS and NodeJS or RequireJS module formats.  In
    // Common/Node/RequireJS, the module exports the Q API and when
    // executed as a simple <script>, it creates a Q global instead.
    // The use of "undefined" in the arguments is a
    // micro-optmization for compression systems, permitting
    // every occurrence of the "undefined" variable to be
    // replaced with a single-character.
    // RequireJS
    if (typeof define === "function") {
        define(function (require, exports, module) {
            definition(require, exports, module);
        });
    // CommonJS
    } else if (typeof exports === "object") {
        definition(require, exports, module);
    // <script>
    } else {
        Q = definition(undefined, {}, {});
    }
})(function (serverSideRequire, exports, module, undefined) {
    ...
    main library here
    ... 

/*
 * In module systems that support ``module.exports`` assignment or exports
 * return, allow the ``ref`` function to be used as the ``Q`` constructor
 * exported by the "q" module.
 */
for (var name in exports)
    ref[name] = exports[name];
module.exports = ref;
return ref;
});

虽然冗长，但它的灵活性令人印象深刻，并且无论您的执行环境是什么，都可以简单地工作。

你可以使用uRequire通过模板系统将用AMD或CommonJS编写的模块转换为AMD、CommonJS或UMD。

可选的uRequire构建你的整个包作为一个combinedFile.js运行在所有环境(nodejs, AMD或无模块浏览器<脚本 />)使用RJS优化器和杏仁在擎盖下。

uRequire 使您不必在每个模块中维护任何样板 -只需编写普通的AMD或CommonJS模块(如.js， .coffee， .coco， .ls等)而无需噱头。

另外，您可以声明性地添加标准功能，例如将模块导出到全局，例如window.myModule和noConflict()方法，或者有rununtimeinfo(例如__isNode， __isAMD)选择性地或在构建时替换/删除/注入依赖项，自动缩小，操作模块代码等等。

所有这些配置选项都可以在每个bundle或每个模块中打开或关闭，并且您可以拥有彼此派生(继承)的不同构建配置文件(开发，测试，生产等)。

它通过grunt-urequire或standalone与grunt一起工作得很好，并且它有一个很棒的watch选项，只重建更改的文件。

您试过了吗:https://github.com/medikoo/modules-webmake#modules-webmake ?

这就是我正在采取的方法，而且效果很好。代码中没有样板文件，您可以在服务器端和客户端运行相同的模块

相关文章：