CommonJS、AMDとRequireJSの関係は?

Relation between CommonJS, AMD and RequireJS?


質問 written by Greg K @2017-10-11 15:11:17Z

: 788 : 5 : 161

私はまだCommonJS、AMD、RequireJSについて非常に混乱しています。 たくさん読んでも。

CommonJS(以前のServerJS)は、言語がブラウザの外部で使用されるときにJavaScriptの仕様(つまりモジュール)を定義するためのグループであることを私は知っています。 CommonJSモジュールの仕様には、Node.jsやRingoJSなどの実装があります。

CommonJS、Asynchronous Module Definition(AMD)、RequireJSの関係は何ですか? RequireJSはCommonJSモジュール定義の実装ですか? もしそうなら、AMDは何ですか?

コメント 1

requirejs.org / docs / whyamd.htmlを読むと、それらすべてに言及しているので多くのことが明らかになります。(私はこれを全回答とは考えていないので、コメントとして投稿してください)。

written by mmutilva @2013-12-28 21:17:18Z

コメント 2

もっと質問したり追加したりできますか。ES2015の輸入明細書は、これらのすべてにどのように、またはどこに当てはまりますか。例 'ember'からEmberをインポートする。

written by 2016 @2016-02-28 05:24:55Z

コメント 3

(CommonJS、UMD、AMD、ES6)のようなサポートされているJSモジュールフォーマットのいずれかをロードするsystemjsもあります。

written by アンディ @2017-04-20 19:30:17Z

回答 1 written by ChrisN @2017-07-21 15:43:17Z
734

RequireJSAMD 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変数、およびrequireに使われるモジュール識別子(このモジュールに関連した問題のモジュールの位置を記述する)が必要です。依存関係( ソース CommonJSには、 Node.jsなど 、さまざまな実装があります。

CommonJSは特にブラウザを念頭に置いて設計されていないため、ブラウザ環境にはあまり適していません( このための情報源はありません - RequireJSサイトを含むあらゆる場所で使用されているだけです非同期ロードなどで行います。

一方、RequireJSはAMDを実装しています。これはブラウザ環境( ソース )に合うように設計されています。 どうやら、AMDはCommonJS Transportフォーマットのスピンオフとして始まり、そして独自のモジュール定義APIへと進化しました。 それ故に両者間の類似点。 AMDの新機能はモジュールがロードされる前にその依存関係を宣言することを可能にdefine()関数です。 たとえば、定義は次のようになります。

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:

そのため、CommonJSとAMDは実装が異なるJavaScriptモジュール定義APIですが、どちらも同じ由来のものです。

  • AMDはモジュール依存関係の非同期ロードをサポートしているため、ブラウザに適しています。
  • RequireJSAMDの実装ですが、同時にCommonJSの精神(主にモジュール識別子)を守ろうとしています。

さらに混乱させるために、RequireJSはAMDの実装でありながら、CommonJSラッパーを提供しているため、CommonJSモジュールをほぼ直接インポートしてRequireJSで使用することができます。

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

これが物事を明確にするのに役立つことを願っています!

コメント 1

2つのフォーマットのギャップを埋めるuRequire.orgプロジェクトをチェックしてください。どちらか(または両方)に書き込み、2つまたは単純な<​​スクリプト>のいずれかにデプロイします。

written by Angelos Pikoulas 2013 @2013-08-23 23:32:25Z

コメント 2

FYI BrowserifyはブラウザでCommonJSを使えるようにします。

written by Eruant 2014年 @2014-01-30 12:03:27Z

コメント 3

@Eruantしかし、それはまだAMDのように非同期的な性質を持っていません。

written by Inanc Gumus 2014 @2014-05-16 02:30:55Z

コメント 4

RequireJSのドキュメントに記載されているようにCommonJSがブラウザに収まらない理由 - 「CommonJSのrequire()は同期呼び出しであり、すぐにモジュールを返すことが期待されています。これはブラウザではうまく動作しません」詳細はこちら

written by msenni @2015-01-06 11:50:22Z

コメント 5

@aaaaaaあなたはユーザーの要求によってはいくつかの機能を有効にしたいかもしれません。だからAMDの非同期性は便利になるかもしれない。

written by Inanc Gumus @2015-02-04 15:57:36Z

回答 2 written by fqxp @2016-09-04 13:04:15Z
194

CommonJSはそれ以上のものです - それはJavaScriptのための共通のAPIとエコシステムを定義するプロジェクトです。 CommonJSの一部はモジュール仕様です。 Node.jsとRingoJSはサーバーサイドJavaScriptランタイムであり、はい、どちらもCommonJSモジュール仕様に基づいたモジュールを実装しています。

AMD (Asynchronous Module Definition)は、モジュールのもう1つの仕様です。 RequireJSはおそらくAMDの最も人気のある実装です。 CommonJSとの大きな違いの1つは、AMDはモジュールが非同期にロードされることを指定しているということです。

このため、AMDは一般的にクライアント側(ブラウザ内)のJavaScript開発で使用され、CommonJSモジュールは一般的にサーバー側で使用されます。 ただし、どちらの環境でもどちらのモジュール仕様も使用できます。たとえば、RequireJSはNode.jsで実行するための指示を提供し、browserifyはブラウザで実行できるCommonJS Moduleの実装です。

コメント 1

なぜCommonJSのホームページがそれほどひどいのでしょうか...私は公式の仕様書を見ようとしています。それは構文エラー、不完全なドキュメンテーションを持っています、そしてWikiページは解決していません。

written by タコス @2015-03-21 05:56:22Z

コメント 2

それは、モジュールを非同期的にロードするという意味ではありません。動的/遅延ロードについて話しているかもしれません。非同期では、ロードするファイルを提案し、しばらくしてからロードが完了したらコールバックします。同期では、ロードするファイルを提案してから、そのファイルのロードが完了するまでスレッド全体をブロックします。ファイルがロードされるまで、それ以上コードは実行されません。前者は予測不可能性を犠牲にしてより良いパフォーマンスを生み出すことができますが、後者は毎回同じ結果を生み出すことができ、したがってより予測可能です。さまざまな最適化を使用して、これらの問題を軽減できることに注意してください。

written by 15:15にペリー @2015-08-07 22:31:04Z

コメント 3

答えてくれてありがとう。モジュールはES2015のJSで正式なものになりましたが、これはそれらがAMDまたは一般的なJSよりも好まれていることを意味するのでしょうか。

written by Akhoy @2016-04-29 06:22:34Z

コメント 4

それが好ましいという意味ではありません。それはすべて開発者のニーズ次第です。選択肢を残さずにES6モジュールに行くことは特に良い考えではないと思います。ただし、優れたUMDを使用すると、その問題に対処できます。AMDと同期しているCommonJSバンドルをロードすることは、一般的に(最高の)良い考えです(パフォーマンス向上のため)。あなたがもっとコントロールしなければならないように感じるならば、明らかに。そしてあなたはそうすべきです。

written by Maciej Sitko @2016-05-06 12:21:22Z

回答 3 written by RobG @2014-06-04 00:55:51Z
183

簡単に言えば、

CommonJSAMDは、JavaScriptアプリケーションでモジュールとその依存関係を宣言する方法に関する仕様(またはフォーマット)です。

RequireJSはAMD準拠のスクリプトローダライブラリで、 curljsもその一例です。

CommonJS準拠:

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準拠:

AMD compliant:

他のどこかでこのモジュールを使用することができます。

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

いくつかの背景:

実際には、 CommonJSはAPI宣言以上のものであり、その一部しか扱っていません。 AMDはCommonJSリストのモジュールフォーマットのドラフト仕様として始まりましたが、完全な合意には至らず、フォーマットのさらなる開発はamdjsグループに移りました。 どちらのフォーマットがより良いかについての議論は、CommonJSがより広範な一連の懸念をカバーしようとしており、その同期性を考えるとサーバサイド開発により適していると述べている。 Dojoのモジュール宣言の実装にルーツがあるという事実。

出典:

コメント 1

説明ではなくコードを見ることが役立ちます。:) AMD compliantは、実際にはRequireJSですよね。

written by Asim KT 2016 @2016-09-04 02:54:14Z

コメント 2

足りないものがありますか、それとも入力ミスがありますか?あなたは "package / lib"を定義しますが、それから "package / myModule"を必要とします。

written by RullDawg 2016 @2016-12-13 15:32:20Z

コメント 3

ポイントへの違いを説明するいい仕事。

written by Divyanshu Maithani @2017-04-06 15:54:12Z

コメント 4

私はいつも何かがそれがそうである方法である理由の歴史について少し読むのが好きです!その背景を提供してくれてありがとう!

written by Andru @2018-02-05 11:00:16Z

回答 4 written by zangw @2015-08-07 01:02:35Z
24

引用

AMD

  • 1つのブラウザ優先アプローチ
  • 非同期動作と単純化された後方互換性の選択
  • ファイルI / Oの概念はありません。
  • オブジェクト、関数、コンストラクタ、文字列、JSON、その他多くの種類のモジュールをサポートしています。

CommonJS

  • 1つのサーバー優先アプローチ
  • 同期動作を想定する
  • I / O、ファイルシステム、プロミスなど、より幅広い一連の問題をカバーします。
  • ラップされていないモジュールをサポートします。ES.next/Harmonyの仕様にもう少し近づいて、 AMDが強制するdefine()ラッパーから解放されます。
  • オブジェクトをモジュールとしてのみサポートします。
回答 5 written by Luke @2017-05-08 16:12:25Z
12

JavaScriptプログラムをモジュール化していくつかのファイルにまとめ、 main js moduleからchild-modulesを呼び出すのはごく普通のことmain js module

JavaScriptはこれを提供していません。 ChromeとFFの最新のブラウザバージョンでは今日でもそうではありません。

しかし、JavaScriptには他のJavaScriptモジュールを呼び出すためのキーワードがありますか。

答えがいいえであるため、この質問は多くの人にとって世界の完全な崩壊かもしれません


ES5(2009年リリース)では、JavaScriptにimportincluderequireなどのキーワードはありませんでした。

ES6は、 インポートキーワード( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import )を提案する(2015年にリリースされた)日を節約しますが、これを実装しているブラウザはありません。

Babel 6.18.0を使用してES2015オプションのみで変換する場合

import myDefault from "my-module";

またrequireなります。

you will get require again.

これはrequireがモジュールがNode.jsからロードされることrequire意味するからです。 Node.jsはシステムレベルのファイルの読み込みからモジュールへの関数のラップまですべてを処理します。

JavaScriptでは、関数はモジュールを表す唯一のラッパーです。

私はCommonJSとAMDについて非常に混乱していますか?

CommonJSとAMDはどちらも、モジュールをスマートにロードするためのJavaScriptの「欠陥」を克服するための2つの異なる手法です。