Relation entre les CommonJS, AMD et RequireJS?

je suis encore très confus au sujet de CommonJS, AMD et Requerjs. Même après avoir beaucoup lu.

je sais que CommonJS (anciennement ServerJS) est un groupe pour définir certaines spécifications JavaScript (i.e. modules) lorsque le langage est utilisé en dehors du navigateur. La spécification des modules CommonJS a une certaine mise en œuvre comme le noeud.js ou RingoJS, droit?

Quelle est la relation entre CommonJS, Asynchronous Module Definition (AMD) et RequireJS? Être Exige la mise en œuvre d'une définition commune des modules js? Si oui, quelle est la DMLA?

737
demandé sur Greg K 2013-05-13 15:56:23

5 réponses

RequireJS implements the AMD API (source) .

CommonJS est une façon de définir les modules à l'aide d'un objet exports , qui définit le contenu du module. En termes simples, une implémentation de CommonJS pourrait fonctionner comme ceci:

// 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"; };

fondamentalement, CommonJS spécifie que vous devez avoir une fonction require() pour fetch les dépendances, une variable exports pour exporter le contenu du module et un identificateur de module (qui décrit l'emplacement du module en question par rapport à ce module) qui est utilisé pour exiger les dépendances ( source ). CommonJS a diverses implémentations, y compris le noeud .js , que vous avez mentionné.

CommonJS N'a pas été particulièrement conçu avec les navigateurs à l'esprit, il ne convient donc pas dans l'environnement du navigateur très Eh bien ( Je n'ai vraiment aucune source pour cela--il suffit de le dire partout, y compris le site Requerjs. ) apparemment, cela a quelque chose à voir avec le chargement asynchrone, etc.

D'autre part, RequireJS implémente AMD, qui est conçu pour s'adapter à l'environnement du navigateur ( source ). Apparemment, AMD a commencé comme une spinoff du format de Transport js commun et a évolué dans sa propre définition de module API. D'où les similitudes entre les deux. La nouvelle fonctionnalité dans AMD est la fonction define() qui permet au module de déclarer ses dépendances avant d'être chargé. Par exemple, la définition pourrait être:

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

Donc, CommonJS et AMD sont JavaScript de définition de module Api qui ont implémentations différentes, mais tous deux viennent de la même origine.

  • AMD est plus adapté pour le navigateur, car il prend en charge le chargement asynchrone des dépendances de modules.
  • RequireJS est une implémentation de AMD , alors que dans le même temps, en essayant de garder l'esprit de CommonJS (notamment dans le module identifiants).

pour vous déconcerter encore plus, Requerjs, tout en étant une implémentation AMD, offre un wrapper js commun pour que les modules js communs puissent presque directement importés pour être utilisés avec des Requisjs.

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

j'espère que cela aidera à clarifier les choses!

695
répondu jakee 2017-07-21 15:43:17

CommonJS est plus que cela - c'est un projet pour définir une API commune et un écosystème pour JavaScript. Une partie de CommonJS est le Module spécification. Nœud.js et RingoJS sont des temps D'exécution JavaScript côté serveur, et oui, tous les deux implémentent des modules basés sur les spécifications du Module CommonJS.

AMD (définition de Module asynchrone) est une autre spécification pour les modules. requirements est probablement l'implémentation la plus populaire de la DMLA. Une différence majeure de CommonJS est que AMD spécifie que les modules sont chargés de manière asynchrone - ce qui signifie que les modules sont chargés en parallèle, par opposition à bloquer l'exécution en attendant qu'une charge soit terminée.

AMD est généralement plus utilisé dans le développement JavaScript côté client (dans le navigateur) à cause de cela, et les Modules CommonJS sont généralement utilisés côté serveur. Toutefois, vous pouvez utiliser l'un ou l'autre module spec dans l'un ou l'autre environnement - par exemple, Requerjs offre directions pour exécuter dans le noeud.js et browserify est une implémentation du Module CommonJS qui peut s'exécuter dans le navigateur.

190
répondu Nate 2016-09-04 13:04:15

la réponse courte serait:

CommonJS et AMD sont des spécifications (ou formats) sur la façon dont les modules et leurs dépendances doivent être déclarés dans les applications javascript.

RequireJS est une bibliothèque de script loader qui est conforme AMD, curljs étant un autre exemple.

conforme CommonJS:

extrait de Addy Osmani du livre .

// 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;

conforme 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
    }
});

ailleurs le module peut être utilisé avec:

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

un peu de contexte:

en fait, CommonJS est beaucoup plus qu'une déclaration API et seulement une partie de celui-ci traite de cela. L'AMD a commencé comme projet de spécification pour le format de module sur la liste commune des JM, mais un consensus complet n'a pas été atteint et le développement ultérieur du format a été déplacé au amdjs group . Les Arguments selon lesquels le format est le meilleur indiquent que CommonJS tente de couvrir un ensemble plus large de préoccupations et qu'il est mieux adapté pour le développement côté serveur étant donné sa nature synchrone, et que AMD est mieux adapté pour le développement côté client (navigateur) étant donné sa nature asynchrone et le fait qu'il a ses racines dans la mise en œuvre du module déclaration du Dojo.

Sources:

174
répondu mmutilva 2014-06-04 00:55:51

citant

AMD :

  • Un navigateur-première approche
  • en Optant pour un comportement asynchrone et simplifiée de la rétro-compatibilité
  • Il n'a pas de notion de Fichier I/o". 1519110920"
  • il prend en charge les objets, les fonctions, les constructeurs, les chaînes, JSON et bien d'autres types de modules.

CommonJS :

  • Un serveur-première approche
  • Assuming synchrone behavior
  • couvre un ensemble plus large de préoccupations telles que l'E/S, le système de fichiers, les promesses et plus.
  • supporte les modules déroulés, il peut se sentir un peu plus proche de la ES.suivant / Harmony spécifications, vous libérant de l'emballage define () que AMD applique.
  • supporte uniquement les objets en tant que modules.
21
répondu zangw 2015-08-07 01:02:35

il est tout à fait normal d'organiser le programme JavaScript modulaire en plusieurs fichiers et d'appeler child-modules du main js module .

le truc C'est que JavaScript ne fournit pas ça. Pas même aujourd'hui dans les dernières versions de navigateur de Chrome et FF.

mais, y a-t-il un mot-clé dans JavaScript pour appeler un autre module JavaScript?

cette question peut être un effondrement total du monde pour beaucoup parce que la réponse est Non .


Dans l'ES5 ( sorti en 2009 ) JavaScript n'avait pas de mots clés tels que importer , inclure , ou exiger .

ES6 saves the day (publié en 2015 ) proposant le import keyword ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import ), mais aucun navigateur ne le met en œuvre.

si vous utilisez Babel 6.18.0 et transpile avec L'option ES2015 seulement

import myDefault from "my-module";

vous recevrez à nouveau require .

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

c'est parce que require signifie que le module sera chargé à partir du noeud.js. Nœud.js s'occupera de tout, de la lecture des fichiers au niveau du système aux fonctions d'enrubannage. dans le module.

parce qu'en JavaScript les fonctions sont les seuls wrappers à représenter les modules.

Je suis très confus au sujet de CommonJS et AMD?

les CommonJS et AMD ne sont que deux techniques différentes pour surmonter le" défaut " JavaScript de charger les modules smart.

10
répondu prosti 2017-05-08 16:12:25