RequireJS-CommonJS

介绍

在前端开发中，模块化已经成为非常重要的组织代码方式。RequireJS 和 CommonJS 都是可选的模块化加载器。RequireJS 面向网页应用开发，强调代码的异步加载，而 CommonJS 更适合在服务端和命令行中使用，直接同步加载。然而，在实践中，有时可能需要同时使用 RequireJS 和 CommonJS，这里我们就介绍一下如何实现这种情况下的模块化。

在 RequireJS 中使用 CommonJS

RequireJS 提供了 RequireJS CommonJS Wrapper，可以让 RequireJS 加载 CommonJS 模块：

define(function (require) {
  const myModule = require("myModule");
  // ...
});

也可以直接使用 RequireJS Text Plugin 引入 CommonJS 模块：

define(["text!myModule.js"], function (myModule) {
  // ...
});

使用 text plugin 的好处是可以直接在 JavaScript 文件中导入其他文件，比如 CSS、Markdown，这些文件会被当做字符串直接嵌入到 JavaScript 中。

在 CommonJS 中使用 RequireJS

CommonJS 的模块加载是同步的，而 RequireJS 是异步的，为了兼容这两种方式，我们需要使用一个 RequireJS 插件来包装我们的模块。

// amdify.js
define(function () {
  return function amdify(module) {
    return {
      require: function (deps, callback) {
        var args = [];
        for (var i = 0; i < deps.length; i++) {
          args.push(require(deps[i]));
        }
        callback.apply(null, args);
      },
      exports: module.exports,
    };
  };
});

amdify.js 是一个 AMD 形式定义的模块，它的作用是把 CommonJS 模块转换成 AMD 标准的模块。我们可以采用以下方式在 CommonJS 文件中直接使用这个插件：

var amdify = require("amdify");

function main() {
  var myModule = require("myModule");
  // ...
}

amdify(module).require(["myModule"], main);

这里我们通过调用 amdify 函数将 module 对象转换成 AMD 模块，并传入依赖和回调函数。

总结

RequireJS 和 CommonJS 都是很好的模块加载器，在不同场景下可以选择合适的加载器。在使用的过程中，我们可以通过 RequireJS 提供的 CommonJS Wrapper 或 Text Plugin 来加载 CommonJS 模块；也可以通过编写一个 RequireJS 插件来支持在 CommonJS 中使用 RequireJS 的方式。