JavaScriptモジュールの理解：バンドリングと透過

$（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>

グローバルは必要ありませんか？

• ソースオーダー独立性
NPMへのアクセス
• 独自のアプリケーションコードを名前を掲載する必要はありません
必要に応じていつでもモジュールを動的にロードします
• 現在の

本当に

本当に複雑です。 まず、使用中のさまざまなモジュール形式があります。

commonjs amd

umd
es6モジュール
バンドル資産のツールにはさまざまな形状とサイズがあります：
• browserify

jspm

webpack

• lollup
• ブランチ /ブロコリ
• スプロケット
• gulp / grunt
で独自に作成します
それから、使用したいトランスピラーがいます：
• es6
のバベル

coffeescript

typeScript

• さらに、モジュールの動的負荷を可能にするさまざまなライブラリがあります。
• require.js
• system.js

これらは、現在使用されている人気のあるツールの短縮リストです。これは、初心者と専門家向けの地雷原です。 また、トランスピーのコストは、これらのツールの多くを組み合わせて一致させ、異なる結果を得ることができることを強調しています。

2016年にツーリングを統合しましょう

• フロントエンドの開発者は、ビルドツールを非常に長い間使用してきましたが、ビルドステップが標準になったのはここ数年だけです。 SassやCoffeescriptなどのツールは、前処理を主流にするのに役立ちましたが、ES6の周りの勢いにより全員が参加しました。
• JavaScriptコミュニティは2015年にいくつかの大きな改善を行いましたが、2016年にツールを統合する必要があります。https：//t.co/hgrljisqhb—NicolásBevacqua（@nzgb）2016年1月8日
私は同意します。

gulpとgruntは過去数年間で非常に人気がありました。これらのツールを使用すると、一連の変革を記述して資産をパイプすることができます。 多くの人がNPMを通じてツールを直接使用することを選択していますが、彼らは非常に効果的であり、まだ人気があります。NPMスクリプトのためにGulpとGruntを残し、NPMをビルドツールとして使用するガイドをご覧ください。個人的には、私はもう資産パイプラインの構築を気にしません。私が探しているのは、必要に応じて最新のツールを使用できる最小限の構成ツールです。実装、構成、継続的なメンテナンスについて心配する必要なく、システムとローダー。 本質的に、すべての開発者はここ数年にわたって資産パイプラインの作成に時間を費やしてきました。

コミュニティは、browserify、webpack、jspm、sprockets、gulpなどのツールに分割されています。 それは実際には問題ではありません。明確な道を理解しようとしているすべての人にとって混乱しているだけです。

開始点をクリア

同意できることがいくつかあります：

ES2015モジュールは、JavaScriptのTrue Futureモジュール形式の1つです。

Babelは、今日の選択のES2015コンパイラです。

ネイティブローダーはまだブラウザで利用できることからしばらく離れています。TelerikによるJavaScriptの将来に関するレポートは、モジュールのロードハードルを考えると、完全なES2015サポートが2年以上かかる可能性があることを示唆しています。
• 今すぐモジュールを使用したい場合は、ある時点でCommonJSが含まれる可能性が非常に高いです。
• browserify、webpack、jspmを使用して最小限の構成セットアップがどのように見えるかを見てみましょう。これらは、今日知っている最も重要なJavaScriptバンドラーです。
新しいプロジェクト
• お気に入りのテキストエディターのindex.htmlを更新

また、コードを実行するためのサーバー、たとえば、ライブリロード機能を備えた素晴らしいゼロコンフィグHTTPサーバーであるライブサーバーなどのサーバーも必要です。 NPMインストール-Gライブサーバーでグローバルにインストールし、プロジェクトルートからライブサーバーを実行して開始します。

browserify

browserifyでは、すべての依存関係をバンドルすることにより、ブラウザに（ 'モジュール'）を要求できます。

src/lib.jsを開き、最初のモジュールを追加します

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

package.jsonのスクリプトセクションを更新します

このスクリプトをnpm run browserify

で実行します

browserifyはプロジェクトルートにbundle.jsを作成し、コンソールに最も退場する4出力が表示されるはずです。 Browserifyが何をしているのか、このバンドルがどのように作成されているかについて詳しく知るために、egghead.io

でbrowserifyの紹介を見ることをお勧めします

おめでとうございます！これで、ブラウザにモジュールがあります！ ？

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

browserifyのもう1つの重要な利点は、執筆したモジュールだけでなく、npmモジュールにもアクセスできることです。

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>
</span><span><span><span> lang<span>="en"</span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title>></title></span>Modules!<span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="bundle.js"</script></span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span>

を呼び出します

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

NPM Run Browserifyを使用してバンドルをもう一度作成し、ブラウザには4とA 7が表示されるはずです。

これまでのところに続いた場合、今すぐブラウザでモジュールを使用して開始する必要があるすべてを知っています。これは、最初に概説した多くの利点をもたらします。

グローバルは必要ありませんか？

ソースオーダー独立性

NPMへのアクセス
• 独自のアプリケーションコードを名前を付ける必要はありません
実行時にモジュールの動的読み込みを見ていきます。
webpack

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にコンパイルする言語の非常に長いリスト

の別のトランスピラーを使用することもできます。 モジュールバンドラーでそれらを使用する方法を見る前に、最初にツールを直接使用する方法を見てみましょう。

coffeescript

coffey-lib.coffee

を編集します

注：coffeescriptは、モジュールにcommonjs構文を使用します rawce.jsonにスクリプトを追加して、コーヒー実行可能ファイルを実行する

npm run coffee

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

で実行します

typeScript

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>

babel

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>

babel cliを実行するためにpackage.jsonにスクリプトを追加する npm run babel

<span><span>
</span><span><span><span> lang<span>="en"</span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><meta> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title>></title></span>Modules!<span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span>></span>
</span>  <span><span><span><script> src<span >="bundle.js"</script></span>></span><span><span></span>></span>
</span><span><span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span></span></span>

で実行します

/distのファイルには、以前に使用したように、browserifyまたはwebpackで完全に動作するCommonJSモジュール形式のES5コードが含まれています。 最初にCommonJSを使用してES5に輸送してからバンドルするか、他のパッケージを使用して両方を単一のステップで実行できます。

browserifyの場合は、プラグインがコーヒー化、tsify、およびbabelifyが輸送とバンドルを持っています。

Webパックには、さまざまな言語のモジュールを要求するために、ローダーのコーヒーローダー、TS-ローダー、バベルローダーがあります。

jspm

JSPMは、動的ES6モジュールローダーの上に構築されたSystemS Universal Module Loaderのパッケージマネージャーです

JSPMは別のアプローチを取り、モジュールローダーSystem.jsから始めます。 System.jsは、開発時にローダー仕様に従うプロジェクトです。

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>

ブラウザでは、いくつかのリクエストが行われ、Lodash用の404が表示されます。これは、jspmがjspm_packagesディレクトリからデフォルトでパッケージをロードするためです。 JSPMを実行してlodashをインストールしてそのディレクトリにLodashをインストールすると、コンソール、4と7に予想される出力が表示されます。

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モジュールを動的に必要とし、その場でコンパイルします。

CoffeeScriptまたはTypeScriptモジュールのES5コンパイルされたバージョンを一度に1つずつ除去してロードすることもできます。もう1つのオプションは、事前コンパイルされたES5コードを要求するのではなく、System.jsプラグインを使用してコードを透過させることです。
• jspm
でバンドルを作成するための最終スクリプトをpackage.jsonに追加する
npm run jspm
• で実行します

  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を再訪

  以前のWebpackの例は、デフォルトのオプションを使用した最も単純な例でした。1つのバンドルにcommonJSモジュールを搭載したentry.jsをコンパイルしました。 Webpackでもっと派手なことをするときは、すべてのローダー構成のカスタム構成ファイルを作成する必要があります。

  プロジェクトのルートでwebpack.config.jsを作成

  <span>export default function $() { ... }
  </span>

  index.htmlを更新して、バンドルされたファイルのみを再度ロードします
  バベル、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>
  </span><span><span><span> lang<span>="en"</span>></span>
  </span><span><span><span>></span>
  </span>  <span><span><span><meta> charset<span>="utf-8"</span>></span>
  </span>  <span><span><span><title>></title></span>Modules!<span><span></span>></span>
  </span><span><span><span></span>></span>
  </span><span><span><span>></span>
  </span>  <span><span><span><script> src<span >="bundle.js"</script></span>></span><span><span></span>></span>
  </span><span><span><span></span>></span>
  </span><span><span><span></span>></span>
  </span></span></span></span></span></span></span>

  ここでカバーしているよりもWebpackには非常に多くのことがありますが、これらの簡単なセットアップは素晴らしい出発点です。

  そこに戻って

  <span>var double = function(number) {
  </span>  <span>return number * 2;
  </span><span>}
  </span>
  module<span>.exports = {
  </span>  <span>double: double
  </span><span>}
  </span>

  そして、モジュールの探求を終了すると、それらは多くの問題を解決し、ツールが邪魔にならない場合、アプリケーションの複雑さを実際に減らすことができます。 まだモジュールを使用していない場合は、今が時間です。資産パイプラインの建設に不必要な時間を費やす必要はありません。代わりに、Just Work™。

  Webpackは現在のJuggernautであり、ほとんど何でもできるように構成できます。 JSPMは、すべてのバンドルニーズに最適なツールであり、さまざまなフォーマットで動作し、開発者エクスペリエンスが優れています。 Browserifyは依然として堅実なオプションです。モダンモジュールバンドラーの祖父です。それは、Webpackの非常に愛されている機能（バンドルスプリットやホットリロードなど）のいくつかを含めるように成長しています。 最後に、system.jsは、実行時に追加のモジュールをロードできる必要がある場合に最適です。

  上記のすべてのツールを1つのプロジェクトで使用したくありませんが、これらの3つの一般的なオプションと、必要に応じてトランスピラーを使用する方法を理解することが重要です。 モジュールを使用するだけの場合は、デフォルトオプションを使用してbrowserify、jspm、またはwebpackがジョブを実行します。

  ツールをシンプルに保ち、構成ライトを維持します。ハッピーバンドル。

  JavaScriptモジュール、バンドリング、および移動に関するよくある質問（FAQ） JavaScriptモジュール、バンドリング、および伝達の違いは何ですか？

  JavaScriptモジュールは、他のスクリプトでインポートおよび使用できる個々のコード単位です。彼らはコードを整理するのに役立ち、それをより維持可能で再利用可能にします。一方、バンドルは、複数のJavaScriptファイルを単一のファイルに結合するプロセスです。これは、HTTP要求の数を減らすために行われ、Webアプリケーションのパフォーマンスを大幅に改善できます。トランスピーは、ソースコードをある言語またはバージョンから別の言語に変換するプロセスです。 JavaScriptのコンテキストでは、多くの場合、新しいJavaScriptの構文を古いブラウザとの互換性のために古いバージョンに変換することを指します。 。まず、複数のJavaScriptファイルを1つに結合することにより、HTTP要求の数を減らします。これにより、Webアプリケーションのパフォーマンスが大幅に向上する可能性があります。第二に、バンドリングを使用すると、ブラウザでモジュールをサポートしていないモジュールを使用できます。最後に、バンドリングには、JavaScriptファイルのサイズを縮小するMinificationというプロセスを含めることもできます。 Babelは、JavaScriptコードが異なるブラウザ間で互換性があることを確認する上で重要な役割を果たしています。これは、新しいJavaScript構文をほとんどのブラウザでサポートされている古いバージョンに変換することで行います。これにより、開発者はブラウザの互換性の問題を心配することなくJavaScriptの最新機能を使用できます。他のモジュールが使用できる機能。モジュールがインポートされると、エクスポートされた変数または関数がインポートスクリプトで利用可能になります。これにより、コードの再利用とコードのより良い組織が可能になります。

  人気のあるJavaScriptバンドリングツールは何ですか？

  人気のJavaScriptバンドリングツールには、Webパック、ロールアップ、小包が含まれます。これらのツールは、JavaScriptファイルをバンドルするだけでなく、コード分割、怠惰な読み込み、CSSや画像などの他の資産の処理などの機能を提供します。開発者は、互換性の問題を心配することなく、最新の機能と構文を使用して最新のJavaScriptを作成できます。トランスピラーは、最新のJavaScriptをほとんどのブラウザと互換性のあるバージョンに変換します。これにより、JavaScriptコードがさまざまなブラウザで一貫して実行されることが保証されます。

  バンドリングせずにjavaScriptモジュールを使用できますか？

  はい、バンドルなしでJavaScriptモジュールを使用することができます。ただし、これにより、複数のHTTP要求が原因でパフォーマンスの問題が発生する可能性があります。また、すべてのブラウザがJavaScriptモジュールをサポートしているわけではないため、バンドルは互換性を確保するのに役立ちます。 HTTP要求の数。一方、縮小は、JavaScriptファイルから不要な文字（スペースやコメントなど）を削除してサイズを縮小するプロセスです。バンドルと縮小の両方がWebアプリケーションのパフォーマンスを向上させることができます。

  プロジェクトに適したバンドルツールを選択するにはどうすればよいですか？ 。考慮すべき要因には、プロジェクトのサイズ、必要な機能（コード分割や他の資産の処理など）、および個人的な好みが含まれます。いくつかの異なるツールを試して、プロジェクトに最適なツールを確認することをお勧めします。モジュール、バンドル、および輸送は有望に見えます。 JavaScriptの連続的な進化により、より高度な機能と構文が期待できます。これには、古いブラウザとの互換性のために透過性が必要になります。バンドルは、パフォーマンス上の理由で引き続き重要です。モジュールに関しては、それらはJavaScriptの標準的な部分になりつつあり、ブラウザーでより良いサポートを期待できます。

以上がJavaScriptモジュールの理解：バンドリングと透過の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。