$（function（）{...}）;
独自のアプリケーションコードは、通常、グローバルな範囲の汚染を防ぐために、グローバルなようなアプリの下に名前が付けられていました。これがなければ、名前の衝突があり、物事がバラバラになるのは非常に長いです。
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>ライブラリは、一般的なモジュール形式（ES6モジュール）でオブジェクトをエクスポートします。
<span>export default function $() { ... }
</span>モジュールをローカルスコープにインポートして使用します。
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>commonjs amd
webpack
typeScript
これらは、現在使用されている人気のあるツールの短縮リストです。これは、初心者と専門家向けの地雷原です。 また、トランスピーのコストは、これらのツールの多くを組み合わせて一致させ、異なる結果を得ることができることを強調しています。
2016年にツーリングを統合しましょうgulpとgruntは過去数年間で非常に人気がありました。これらのツールを使用すると、一連の変革を記述して資産をパイプすることができます。 多くの人がNPMを通じてツールを直接使用することを選択していますが、彼らは非常に効果的であり、まだ人気があります。NPMスクリプトのためにGulpとGruntを残し、NPMをビルドツールとして使用するガイドをご覧ください。個人的には、私はもう資産パイプラインの構築を気にしません。私が探しているのは、必要に応じて最新のツールを使用できる最小限の構成ツールです。実装、構成、継続的なメンテナンスについて心配する必要なく、システムとローダー。 本質的に、すべての開発者はここ数年にわたって資産パイプラインの作成に時間を費やしてきました。
コミュニティは、browserify、webpack、jspm、sprockets、gulpなどのツールに分割されています。 それは実際には問題ではありません。明確な道を理解しようとしているすべての人にとって混乱しているだけです。
開始点をクリア同意できることがいくつかあります：
ES2015モジュールは、JavaScriptのTrue Futureモジュール形式の1つです。
Babelは、今日の選択のES2015コンパイラです。browserify
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>src/entry.jsを開きます。モジュールが必要になり、使用します。
<span>export default function $() { ... }
</span>
browserifyはプロジェクトルートにbundle.jsを作成し、コンソールに最も退場する4出力が表示されるはずです。 Browserifyが何をしているのか、このバンドルがどのように作成されているかについて詳しく知るために、egghead.io
でbrowserifyの紹介を見ることをお勧めしますおめでとうございます！これで、ブラウザにモジュールがあります！ ？
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>src/lib.jsを編集します
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>src/entry.jsを編集し、新しいaddfive関数
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><title</span>></span>Modules!<span><span></title</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>これまでのところに続いた場合、今すぐブラウザでモジュールを使用して開始する必要があるすべてを知っています。これは、最初に概説した多くの利点をもたらします。
グローバルは必要ありませんか？ソースオーダー独立性
Webpackはモジュールバンドラーです。 webpackは依存関係を持つモジュールを取得し、それらのモジュールを表す静的資産を生成します。
package.jsonに新しいスクリプトを追加して、webpackを呼び出すnpm run webpack
で実行しますwebpackにはbundle.jsが書き換えられ、ブラウザの出力はまったく同じである必要があります。
npmを実行してみてくださいbrowserifyおよびnpm run webpackを実行し、コンパイルされたbundle.jsファイルの違いを調べます。 これらのツールが内部的にどのように機能するかを理解することはそれほど重要ではありません。注意すべき重要なことは、実装が異なる一方で、基本的に標準のブラウザに優しいJavaScriptに同じコードをコンパイルするという同じタスクを実行していることです。 各モジュールは、bundle.js内の関数内に配置され、必要に応じてロードできるようにIDを割り当てます。<span>export default function $() { ... }
</span>webpackにははるかに
があります！ それは本当にモジュールバンドラーのスイスアーミーナイフです。 WebPackには、箱から出して開発するための優れたツールが付属しています。ホットモジュールの交換など、ブラウザに変更された場合に個々のモジュールを自動的にリロードします。これは、リベロードと同様ですが、ページの更新はありません。さまざまなアセットタイプのローダーのリストも増えています。CSSローダーとスタイルローダーを使用したCSSでさえ、CSSをJavaScriptバンドルにコンパイルして実行時にページに注入できるローダーです。 これはこの記事の範囲外ですが、Webpackを始める際にこれにはさらに多くのことがあります。
javascriptトランスピラーこれらは、今日使用されている最も人気のある3つのトランスピラーです。また、JSにコンパイルする言語の非常に長いリスト
の別のトランスピラーを使用することもできます。 モジュールバンドラーでそれらを使用する方法を見る前に、最初にツールを直接使用する方法を見てみましょう。
coffeescriptcoffey-lib.coffee
注：coffeescriptは、モジュールにcommonjs構文を使用します rawce.jsonにスクリプトを追加して、コーヒー実行可能ファイルを実行する
npm run coffee
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>ts-lib.ts
を編集します<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>注：TypeScriptには、ES2015モジュールの構文とcommonjsのミックスのように見えるモジュール用の独自の構文があります。
package.jsonにスクリプトを追加して、TSC実行可能ファイルを実行します
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>npm run tsc
で実行しますコンパイラは、タイプスクリプトファイルではない外部モジュールを操作する方法を知るためにタイプ定義が必要なため、Lodashを見つけることができないことについて不平を言います。 次の定義ファイルを取得できます：
<span>export default function $() { ... }
</span>ES6-LIB.js
を編集します<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>注：Babelは、素敵な新しいES2015モジュールの構文を理解しています
babelは、どのプリセットを使用するかを指定するための構成ファイルが必要です
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span><span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><title</span>></span>Modules!<span><span></title</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
/distのファイルには、以前に使用したように、browserifyまたはwebpackで完全に動作するCommonJSモジュール形式のES5コードが含まれています。 最初にCommonJSを使用してES5に輸送してからバンドルするか、他のパッケージを使用して両方を単一のステップで実行できます。
browserifyの場合は、プラグインがコーヒー化、tsify、およびbabelifyが輸送とバンドルを持っています。Webパックには、さまざまな言語のモジュールを要求するために、ローダーのコーヒーローダー、TS-ローダー、バベルローダーがあります。
jspm
JSPMは、動的ES6モジュールローダーの上に構築されたSystemS Universal Module Loaderのパッケージマネージャーです
JSPMプロジェクトをインストールして初期化
すべてのデフォルトを受け入れ、babelがトランスピラーとして使用されることを確認します。これにより、system.jsがES6スタイルモジュールに実行されるときにBabelを使用するように構成します。
index.htmlを更新して、system.jsをロードして構成します
<span>var double = function(number) {
</span> <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span> <span>double: double
</span><span>}
</span>entry.jsファイルは、system.import（ 'src/entry.js'）;。
で動的にロードされています
system.jsはentry.jsを読み込み、libモジュールが必要であるため、実行時にフェッチします。<span>var lib = require('./lib.js');
</span><span>console.log(lib.double(2));
</span>system.jsはlib.jsをロードし、それがlodash/sumが必要であることを確認し、それを取得します。
また、System.jsはES6で直接作業する方法を知っています。Entry.jsを更新してES6モジュールを動的に必要とし、その場でコンパイルします。
index.htmlのbundle.jsのスクリプトタグとブラウザは、追加のhttpリクエストなしで制作可能なバンドルをロードする必要があります。
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>以前のWebpackの例は、デフォルトのオプションを使用した最も単純な例でした。1つのバンドルにcommonJSモジュールを搭載したentry.jsをコンパイルしました。 Webpackでもっと派手なことをするときは、すべてのローダー構成のカスタム構成ファイルを作成する必要があります。
プロジェクトのルートでwebpack.config.jsを作成
<span>export default function $() { ... }
</span>バベル、coffeescript、およびタイプスクリプトでのトランスピーのためにローダーをインストールします
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>グローバルにwebpackをインストールし、configファイルからバンドルを作成するために引数なしで実行します。
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>これらのファイル拡張機能にこれらのローダーを使用することを知っているので、Entry.jsのES6、Coffeescript、またはTypeScriptを無料で使用できます。これらを1つずつないことで試してみてください。
<span><span><!DOCTYPE html></span> </span><span><span><span><html</span> lang<span>="en"</span>></span> </span><span><span><span><head</span>></span> </span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span> </span> <span><span><span><title</span>></span>Modules!<span><span></title</span>></span> </span><span><span><span></head</span>></span> </span><span><span><span><body</span>></span> </span> <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span> </span><span><span><span></body</span>></span> </span><span><span><span></html</span>></span> </span>
そこに戻って
<span>var double = function(number) {
</span> <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span> <span>double: double
</span><span>}
</span>Webpackは現在のJuggernautであり、ほとんど何でもできるように構成できます。 JSPMは、すべてのバンドルニーズに最適なツールであり、さまざまなフォーマットで動作し、開発者エクスペリエンスが優れています。 Browserifyは依然として堅実なオプションです。モダンモジュールバンドラーの祖父です。それは、Webpackの非常に愛されている機能（バンドルスプリットやホットリロードなど）のいくつかを含めるように成長しています。 最後に、system.jsは、実行時に追加のモジュールをロードできる必要がある場合に最適です。
上記のすべてのツールを1つのプロジェクトで使用したくありませんが、これらの3つの一般的なオプションと、必要に応じてトランスピラーを使用する方法を理解することが重要です。 モジュールを使用するだけの場合は、デフォルトオプションを使用してbrowserify、jspm、またはwebpackがジョブを実行します。人気のあるJavaScriptバンドリングツールは何ですか？
はい、バンドルなしでJavaScriptモジュールを使用することができます。ただし、これにより、複数のHTTP要求が原因でパフォーマンスの問題が発生する可能性があります。また、すべてのブラウザがJavaScriptモジュールをサポートしているわけではないため、バンドルは互換性を確保するのに役立ちます。 HTTP要求の数。一方、縮小は、JavaScriptファイルから不要な文字（スペースやコメントなど）を削除してサイズを縮小するプロセスです。バンドルと縮小の両方がWebアプリケーションのパフォーマンスを向上させることができます。
以上がJavaScriptモジュールの理解：バンドリングと透過の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
