javascript CommonJS、AMD 和 RequireJS 之间的关系？

Relation between CommonJS, AMD and RequireJS?

提问by gremo

I'm still very confused about CommonJS, AMDand RequireJS, even after reading a lot.

即使在阅读了很多之后，我仍然对CommonJS、AMD和RequireJS感到非常困惑。

I know that CommonJS(formerly ServerJS) is a group for defining some JavaScriptspecifications (i.e. modules) when the language is used outside the browser. CommonJSmodules specification has some implementation like Node.jsor RingoJS, right?

我知道CommonJS（以前称为ServerJS）是一个用于在浏览器之外使用该语言时定义一些JavaScript规范（即模块）的组。CommonJS模块规范有一些实现，比如Node.js或RingoJS，对吧？

What's the relation between CommonJS, Asynchronous Module Definition(AMD) and RequireJS?

Is RequireJSan implementation of the CommonJSmodule definition? If yes, what's AMDthen?

CommonJS、异步模块定义(AMD) 和RequireJS之间的关系是什么？

是RequireJS的的实现CommonJS的模块定义？如果是，那么AMD是什么？

采纳答案by jakee

RequireJSimplements the AMDAPI (source).

RequireJS实现了AMDAPI （源代码）。

CommonJSis a way of defining modules with the help of an exportsobject, that defines the module contents. Simply put, a CommonJS implementation might work like this:

CommonJS是一种借助exports对象定义模块的方法，该对象定义了模块内容。简单地说，一个 CommonJS 实现可能是这样的：

// someModule.js
exports.doSomething = function() { return "foo"; };

//otherModule.js
var someModule = require('someModule'); // in the vein of node    
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };

Basically, CommonJS specifies that you need to have a require()function to fetch dependencies, an exportsvariable to export module contents and a module identifier (which describes the location of the module in question in relation to this module) that is used to require the dependencies (source). CommonJS has various implementations, including Node.js, which you mentioned.

基本上，CommonJS 指定你需要有一个require()函数来获取依赖项，一个exports变量来导出模块内容和一个模块标识符（它描述了与这个模块相关的问题模块的位置），用于要求依赖项（源）。CommonJS 有各种实现，包括您提到的Node.js。

CommonJS was not particularly designed with browsers in mind, so it doesn't fit in the browser environment very well (I really have no source for this--it just says so everywhere, including the RequireJS site.) Apparently, this has something to do with asynchronous loading, etc.

CommonJS 并不是专门为浏览器设计的，所以它不太适合浏览器环境（我真的没有这方面的来源——它只是到处都这么说，包括RequireJS 站点。）做异步加载等。

On the other hand, RequireJS implements AMD, which is designed to suit the browser environment (source). Apparently, AMD started as a spinoff of the CommonJS Transport format and evolved into its own module definition API. Hence the similarities between the two. The new feature in AMD is the define()function that allows the module to declare its dependencies before being loaded. For example, the definition could be:

另一方面，RequireJS 实现了 AMD，旨在适应浏览器环境（源代码）。显然，AMD 最初是从 CommonJS Transport 格式衍生出来的，后来演变成它自己的模块定义 API。因此，两者之间有相似之处。AMD 的新功能是define()允许模块在加载之前声明其依赖项的功能。例如，定义可以是：

define('module/id/string', ['module', 'dependency', 'array'], 
function(module, factory function) {
  return ModuleContents;  
});

So, CommonJS and AMD are JavaScriptmodule definition APIs that have different implementations, but both come from the same origins.

因此，CommonJS 和 AMD 是JavaScript模块定义 API，它们具有不同的实现，但都来自相同的起源。

• AMDis more suited for the browser, because it supports asynchronous loading of module dependencies.
• RequireJSis an implementation of AMD, while at the same time trying to keep the spirit of CommonJS(mainly in the module identifiers).

• AMD更适合浏览器，因为它支持模块依赖的异步加载。
• RequireJS是AMD 的一个实现，同时也力图保持CommonJS的精神（主要体现在模块标识符上）。

To confuse you even more, RequireJS, while being an AMD implementation, offers a CommonJS wrapper so CommonJS modules can almost directly be imported for use with RequireJS.

更让您困惑的是，RequireJS 虽然是 AMD 实现，但提供了一个 CommonJS 包装器，因此几乎可以直接导入 CommonJS 模块以与 RequireJS 一起使用。

define(function(require, exports, module) {
  var someModule = require('someModule'); // in the vein of node    
  exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
});

I hope this helps to clarify things!

我希望这有助于澄清事情！

回答by Nate

CommonJSis more than that - it's a project to define a common API and ecosystem for JavaScript. One part of CommonJS is the Modulespecification. Node.js and RingoJS are server-side JavaScript runtimes, and yes, both of them implement modules based on the CommonJS Module spec.

CommonJS不仅如此——它是一个为 JavaScript 定义通用 API 和生态系统的项目。CommonJS 的一部分是模块规范。Node.js 和 RingoJS 是服务器端 JavaScript 运行时，是的，它们都实现了基于 CommonJS Module 规范的模块。

AMD(Asynchronous Module Definition) is another specification for modules. RequireJSis probably the most popular implementation of AMD. One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously- that means modules are loaded in parallel, as opposed to blocking the execution by waiting for a load to finish.

AMD（异步模块定义）是另一种模块规范。RequireJS可能是 AMD 最流行的实现。与 CommonJS 的一个主要区别是 AMD 指定模块是异步加载的——这意味着模块是并行加载的，而不是通过等待加载完成来阻止执行。

AMD is generally more used in client-side (in-browser) JavaScript development due to this, and CommonJS Modules are generally used server-side. However, you can use either module spec in either environment - for example, RequireJS offers directions for running in Node.jsand browserifyis a CommonJS Module implementation that can run in the browser.

因此，AMD 通常更多地用于客户端（浏览器内）JavaScript 开发，而 CommonJS 模块通常用于服务器端。但是，您可以在任一环境中使用任一模块规范 - 例如，RequireJS 提供了在 Node.js 中运行的指导，而browserify是可以在浏览器中运行的 CommonJS 模块实现。

回答by mmutilva

The short answer would be:

简短的回答是：

CommonJSand AMDare specifications (or formats) on how modules and their dependencies should be declared in javascript applications.

CommonJS和AMD是关于如何在 javascript 应用程序中声明模块及其依赖项的规范（或格式）。

RequireJSis a script loader library that is AMD compliant, curljsbeing another example.

RequireJS是一个符合 AMD 标准的脚本加载器库，curljs是另一个例子。

CommonJS compliant:

符合 CommonJS：

Taken from Addy Osmani's book.

摘自Addy Osmani 的书。

// package/lib is a dependency we require
var lib = require( "package/lib" );

// behavior for our module
function foo(){
    lib.log( "hello world!" );
}

// export (expose) foo to other modules as foobar
exports.foobar = foo;

AMD compliant:

符合 AMD：

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

Somewhere else the module can be used with:

该模块可以在其他地方用于：

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

Some background:

一些背景：

Actually, CommonJSis much more than an API declaration and only a part of it deals with that. AMD started as a draft specification for the module format on the CommonJS list, but full consensus wasn't reached and further development of the format moved to the amdjs group. Arguments around which format is better state that CommonJS attempts to cover a broader set of concerns and that it's better suited for server side development given its synchronous nature, and that AMD is better suited for client side (browser) development given its asynchronous nature and the fact that it has its roots in Dojo's module declaration implementation.

实际上，CommonJS不仅仅是一个 API 声明，它只是其中的一部分。AMD 开始时是 CommonJS 列表中模块格式的草案规范，但没有达成完全共识，格式的进一步开发转移到了amdjs 组。关于哪种格式更好的论点表明 CommonJS 试图涵盖更广泛的问题，并且鉴于其同步性质，它更适合服务器端开发，而 AMD 更适合客户端（浏览器）开发，因为其异步性质和事实上，它源于 Dojo 的模块声明实现。

Sources:

资料来源：

• RequireJS - Why AMD?
• Addy Osmani - Learning JavaScript Design Patterns - Modern Modular JavaScript Design Patterns

• RequireJS - 为什么是 AMD？
• Addy Osmani - 学习 JavaScript 设计模式 - 现代模块化 JavaScript 设计模式

回答by zangw

Quoting

引用

AMD:

超微：

• One browser-first approach
• Opting for asynchronous behavior and simplified backwards compatibility
• It doesn't have any concept of File I/O.
• It supports objects, functions, constructors, strings, JSON and many other types of modules.

• 一种浏览器优先的方法
• 选择异步行为并简化向后兼容性
• 它没有任何文件 I/O 的概念。
• 它支持对象、函数、构造函数、字符串、JSON 和许多其他类型的模块。

CommonJS:

通用JS：

• One server-first approach
• Assuming synchronous behavior
• Cover a broader set of concerns such as I/O, File system, Promises and more.
• Supports unwrapped modules, it can feel a little more close to the ES.next/Harmonyspecifications, freeing you of the define() wrapper that AMDenforces.
• Only support objects as modules.

• 一种服务器优先的方法
• 假设同步行为
• 涵盖更广泛的关注点，例如 I/O、文件系统、承诺等。
• 支持解包模块，感觉更接近ES.next/Harmony规范，让您摆脱AMD强制执行的 define() 包装器。
• 只支持对象作为模块。

回答by prosti

It is quite normal to organize JavaScript program modular into several files and to call child-modulesfrom the main js module.

将 JavaScript 程序模块化组织成多个文件并child-modules从main js module.

The thing is JavaScript doesn't provide this. Not even today in latest browser versions of Chrome and FF.

问题是 JavaScript 不提供这个。即使在今天最新的 Chrome 和 FF 浏览器版本中也没有。

But, is there any keyword in JavaScript to call another JavaScript module?

但是，JavaScript 中是否有任何关键字可以调用另一个 JavaScript 模块？

This question may be a total collapse of the world for many because the answer is No.

这个问题对很多人来说可能是世界彻底崩溃，因为答案是否定的。

---

---

In ES5 ( released in 2009 ) JavaScript had no keywords like import, include, or require.

在 ES5（2009 年发布）中，JavaScript 没有像import、include或require这样的关键字。

ES6 saves the day ( released in 2015 ) proposing the importkeyword ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import), but no browser implements this.

ES6 挽救了这一天（2015 年发布）提出了import关键字（ https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import），但没有浏览器实现这一点。

If you use Babel 6.18.0 and transpile with ES2015 option only

如果您使用 Babel 6.18.0 并且仅使用 ES2015 选项进行编译

import myDefault from "my-module";

you will get requireagain.

你会require再次得到。

"use strict";
var _myModule = require("my-module");
var _myModule2 = _interopRequireDefault(_myModule);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

This is because requiremeans the module will be loaded from Node.js. Node.js will handle everything from system level file read to wrapping functions into the module.

这是因为require意味着模块将从 Node.js 加载。Node.js 将处理从系统级文件读取到将函数包装到模块中的所有事情。

Because in JavaScript functions are the only wrappers to represent the modules.

因为在 JavaScript 中，函数是表示模块的唯一包装器。

I'm a lot confused about CommonJS and AMD?

我对 CommonJS 和 AMD 很困惑？

Both CommonJS and AMD are just two different techniques how to overcome the JavaScript "defect" to load modules smart.

CommonJS 和 AMD 只是两种不同的技术，它们如何克服 JavaScript“缺陷”以智能加载模块。