我仍然对CommonJS, AMD和RequireJS很困惑,即使在阅读了很多之后。
我知道CommonJS(以前的ServerJS)是一个定义JavaScript语言在浏览器外使用时的一些规范(即模块)的组织。CommonJS模块规范有一些实现比如node。js或者RingoJS,对吧?
CommonJS,异步模块定义(AMD)和RequireJS之间的关系是什么? RequireJS是CommonJS模块定义的实现吗?如果是,AMD是什么?
我仍然对CommonJS, AMD和RequireJS很困惑,即使在阅读了很多之后。
我知道CommonJS(以前的ServerJS)是一个定义JavaScript语言在浏览器外使用时的一些规范(即模块)的组织。CommonJS模块规范有一些实现比如node。js或者RingoJS,对吧?
CommonJS,异步模块定义(AMD)和RequireJS之间的关系是什么? RequireJS是CommonJS模块定义的实现吗?如果是,AMD是什么?
当前回答
CommonJS不仅仅是这样——它是一个为JavaScript定义通用API和生态系统的项目。CommonJS的一部分是Module规范。Node.js和RingoJS是服务器端JavaScript运行时,是的,它们都实现了基于CommonJS模块规范的模块。
AMD(异步模块定义)是另一种模块规范。RequireJS可能是AMD最流行的实现。与CommonJS的一个主要区别是AMD指定模块是异步加载的——这意味着模块是并行加载的,而不是通过等待加载完成来阻塞执行。
因此,AMD通常更多地用于客户端(浏览器内)JavaScript开发,而CommonJS模块通常用于服务器端。然而,你可以在任何一个环境中使用任何一个模块规范——例如,RequireJS提供了在Node.js中运行的指导,而browserify是一个可以在浏览器中运行的CommonJS模块实现。
其他回答
AMD
在JavaScript中引入将JavaScript项目扩展到多个文件 主要用于基于浏览器的应用程序和库 流行的实现是RequireJS, Dojo Toolkit
CommonJS:
它是处理大项目中大量功能、文件和模块的规范 ServerJS的初始名称是Mozilla在2009年1月引入的 2009年8月更名为CommonJS,以显示api更广泛的适用性 最初的实现是服务器,nodejs,基于桌面的库
例子
upper.js文件
exports.uppercase = str => str.toUpperCase()
main.js文件
const uppercaseModule = require('uppercase.js')
uppercaseModule.uppercase('test')
总结
AMD——最古老的模块系统之一,最初由require.js库实现。 CommonJS -为Node.js服务器创建的模块系统。 UMD -一个多模块系统,建议作为一个通用系统,兼容AMD和CommonJS。
资源:
https://exploringjs.com/es6/ch_modules.html#sec_modules-in-javascript 维基百科
CommonJS不仅仅是这样——它是一个为JavaScript定义通用API和生态系统的项目。CommonJS的一部分是Module规范。Node.js和RingoJS是服务器端JavaScript运行时,是的,它们都实现了基于CommonJS模块规范的模块。
AMD(异步模块定义)是另一种模块规范。RequireJS可能是AMD最流行的实现。与CommonJS的一个主要区别是AMD指定模块是异步加载的——这意味着模块是并行加载的,而不是通过等待加载完成来阻塞执行。
因此,AMD通常更多地用于客户端(浏览器内)JavaScript开发,而CommonJS模块通常用于服务器端。然而,你可以在任何一个环境中使用任何一个模块规范——例如,RequireJS提供了在Node.js中运行的指导,而browserify是一个可以在浏览器中运行的CommonJS模块实现。
将JavaScript程序模块组织成几个文件并从主js模块调用子模块是很正常的。
问题是JavaScript没有提供这个。即使在最新版本的Chrome和FF浏览器中也没有。
但是,JavaScript中是否有关键字可以调用另一个JavaScript模块呢?
对许多人来说,这个问题可能是世界的彻底崩溃,因为答案是否定的。
在ES5(2009年发布)中,JavaScript没有import、include或require这样的关键字。
ES6挽救了局面(2015年发布)提出了import关键字(https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import),现在所有现代浏览器都支持它。
如果您使用Babel 6.18.0并且只使用ES2015选项进行编译
import myDefault from "my-module";
你会再次得到require。
"use strict";
var _myModule = require("my-module");
var _myModule2 = _interopRequireDefault(_myModule);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
这是因为require意味着模块将从Node.js加载。Node.js将处理从系统级文件读取到将函数包装到模块中的所有事情。
因为在JavaScript中,函数是表示模块的唯一包装器。
我对CommonJS和AMD很困惑?
CommonJS和AMD都是两种不同的技术,如何克服JavaScript的“缺陷”来智能加载模块。
引用
AMD:
一种浏览器优先的方法 选择异步行为和简化向后兼容性 它没有任何文件I/O的概念。 它支持对象、函数、构造函数、字符串、JSON和许多其他类型的模块。
CommonJS:
一种服务器优先的方法 假设同步行为 涵盖更广泛的问题集,如I/O,文件系统,承诺等。 支持未包装模块,感觉更接近ES。next/Harmony规范,将你从AMD强制的define()包装器中解放出来。 只支持对象作为模块。
RequireJS实现了AMD API(源代码)。
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"; };
基本上,CommonJS指定你需要有一个require()函数来获取依赖项,一个exports变量来导出模块内容,还有一个模块标识符(描述了与该模块相关的有问题的模块的位置),用于要求依赖项(源)。CommonJS有各种实现,包括你提到的Node.js。
CommonJS在设计时并没有特别考虑到浏览器,所以它不太适合浏览器环境(*我真的没有这个来源——它只是在任何地方都这么说,包括RequireJS站点。*)显然,这与异步加载等有关。
另一方面,RequireJS实现了AMD,它被设计成适合浏览器环境(源代码)。显然,AMD一开始是CommonJS传输格式的衍生品,后来发展成了自己的模块定义API。因此两者有相似之处。AMD的新特性是define()函数,它允许模块在加载之前声明它的依赖项。例如,定义可以是:
define('module/id/string', ['module', 'dependency', 'array'],
function(module, factory function) {
return ModuleContents;
});
所以,CommonJS和AMD是JavaScript模块定义api,它们有不同的实现,但它们都来自同一个起源。
AMD更适合浏览器,因为它支持异步加载模块依赖项。 RequireJS是AMD的一个实现,同时试图保持CommonJS的精神(主要是在模块标识符上)。
更让你困惑的是,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"; };
});