RequireJS 和 CommonJS 的区别

IT技术 javascript node.js requirejs
2021-03-15 08:18:07

我想知道这些片段之间的区别是什么。

var $ = require('jquery');
var _ = require('underscore');
var BackBone = require('backbone');

require(['jquery','underscore','backbone'],function ($, _, BackBone){
    //code goes here
})

两者对我来说都很好,但不确定它们在上述两个背后的任何目的。

2个回答

考虑第一个片段,它是 CommonJS 风格的:

var $ = require('jquery');
var _ = require('underscore');
var BackBone = require('backbone');

这些调用是同步调用:require返回时,它返回您请求的module。CommonJSrequire调用是同步的。有一个支持异步形式的提案,require但据我所知,它还没有超出提案级别。Node.js 曾经有require.async哪些已被删除。虽然有一个实现它使用这个包看起来很像使用 AMD 风格的module。

现在,考虑第二个片段,它是 AMD 风格的:

require(['jquery','underscore','backbone'],function ($, _, BackBone){
    //code goes here
})

由于 RequireJS 实现了 AMD 类型的module系统,因此上述代码适用于 RequireJS。require调用是 --- 正如名称异步module定义 (AMD) 所建议的 --- 异步。您不能依赖 的返回值require来获取module值。您必须改用回调。define调用以类似的方式工作,但除了需要module之外还定义了一个module。

现在,如果您使用 RequireJS,它提供了允许在定义module时使用任一样式的工具,以便您可以像这样定义module:

define(['jquery','underscore','backbone'],function ($, _, BackBone){
    //code goes here
});

或者使用看起来更像 CommonJS 惯用语的东西,如下所示:

define(function (require) {
    var $ = require('jquery');
    var _ = require('underscore');
    var BackBone = require('backbone');
    //code goes here
});

它使得将 CommonJS 样式module转换为与 RequireJS 一起使用变得非常容易:只需使用define上面调用包装它有一个工具可以帮助转换。

在幕后,RequireJS 读取第二种形式的回调代码并创建一个依赖项列表,以便最终将其解释为:

define(['require', 'jquery','underscore','backbone'], function (require) {
    var $ = require('jquery');
    var _ = require('underscore');
    var BackBone = require('backbone');
    //code goes here
})

require回调中的调用是同步的可能会令人惊讶(鉴于 AMD 是异步的)这是 RequireJS 支持 CommonJS 风格的一部分。RequireJS 支持一种同步require调用,但有以下警告:如果在调用 synchronous 之前已经定义了modulerequire,则 synchronousrequire返回module的值,否则立即失败也就是说,它不会尝试加载module。因为 RequireJS 解释了一个使用 CommonJS 风格的module定义,就像我上面展示的那样——就好像依赖项实际上列在define参数中一样——那么这些module保证在同步调用时加载require 制作。

除了能够在 RequireJS 中使用 CommonJS module(如果添加了包装器),还可以在像 Node.js 这样的 CommonJS 环境中使用为 RequireJS 设计的module。例如,我使用node-amd-loader加载我在 Node.js 中设计为 AMD module的module。

这比我发布的答案要好得多。
2021-04-25 08:18:07

前一个片段遵循 CommonJS 规范,该规范概述了如何导出/传输module以在其他module中使用。

所以,你可以编写看起来像这样的代码

源代码/ExpressModule.js

var express = require('express');
// do initialization
exports.express = express;

然后你可以像这样使用它

src/UserExpressModule.js

var express = require('./ExpressModule');
// do something else

CommonJS 规范主要是为服务器端环境而构建的,并且通过扩展在 Node.js 中使用

另一方面是 AMD,最著名的是由 RequireJS 实现的。AMD 是为浏览器环境或客户端代码而构建的,您可以在此处使用和定义module,例如代码中的后一个片段

示例使用可能是这样的

源代码/main.js

requirejs.config({
    baseUrl: '../vendor'
    path: '../src'
});
require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    // do some client side computation here
});

然后你可以main.js像这样在你的 index.html 中包含这个文件

<script data-main="src/main.js" src="vendor/require.js"></script>

从本质上讲,CommonJS 和 AMD 是module化 Javascript 的核心规范,但针对不同的执行环境。