モジュラーJavaScript：SystemJS＆JSPMの初心者ガイド

キーテイクアウト

JSPMおよびSystemJSを使用してプロジェクトを設定するプロセスには、ディレクトリの作成、NPMプロジェクトの初期化、JSPMのローカルのインストールが含まれます。セットアップが設定されると、JSPMとSystemJSを使用して、さまざまなソースからのパッケージ、ES6コードを輸送し、依存関係を処理します。 JSPMはモジュールバンドラーとしても機能し、すべてのファイルとライブラリを単一のファイルに組み合わせて、ファイルによって使用されるモジュールシステムをSystemJSスタイルモジュールに変換します。このプロセスはパフォーマンスに有益であり、生産アプリケーションで使用する必要があります。
• この記事は、エイドリアン・サンドゥとマーク・ブラウンによって査読されました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！
過去数年間、JavaScriptプログラミング言語は人気が爆発的に爆発しました。リッチなWebアプリケーションとハイブリッドモバイルアプリケーションの両方を開発するための頼りになる言語になりました。また、JavaScriptプロジェクトがますます複雑になっているため、開発者は言語の新しい要件を経験しています。これらの1つはモジュール性です

私が見る限り、モジュール性を達成する必要がある2つの側面があります。

著者のモジュール

依存関係としてインストールされている外部モジュール

ES6は、標準モジュールの構文をJavaScriptとローダー仕様にもたらします。これは良い前進ですが、執筆時点では、ES6モジュールをネイティブにロードできるブラウザはありません。これは、今日モジュールを使用したい場合は、モジュールバンドラーを使用する必要があることを意味します。

現在の風景の概要については、JavaScriptモジュールの理解：バンドリングと輸送
• など、パッケージをダウンロードしてアプリケーションに含めることができるパッケージマネージャーはありません。パッケージマネージャー（BowerやNPMなど）は、プロジェクトのWebサイトにアクセスすることなくフロントエンドの依存関係をダウンロードするのに役立ちますが、それはそれが進む限りです。 この記事では、これらの問題を克服するためにJSPMとSystemJSを使用する方法を確認します。

  jspmとsystemjsは何ですか？

  JavaScriptパッケージマネージャー（別名JSPM）は、SystemJS Universal Module Loaderの上で動作するパッケージマネージャーです。独自のルールセットを備えたまったく新しいパッケージマネージャーではなく、既存のパッケージソースの上に動作します。箱から出して、GithubとNPMで動作します。 BowerベースのパッケージのほとんどはGitHubに基づいているため、JSPMを使用してこれらのパッケージをインストールすることもできます。一般的に使用されるフロントエンドパッケージのほとんどをリストして、インストールを容易にするレジストリがあります。 NPMと同様に、インストール中にパッケージを開発および生産パッケージとして区別するために使用できます。

  SystemJSは、今日使用されている人気のある形式のいずれかで実行時にモジュールをインポートできるモジュールローダーです（CommonJS、UMD、AMD、ES6）。 ES6モジュールローダーポリフィルの上に構築されており、使用されている形式を検出して適切に処理するのに十分なほどスマートです。 SystemJSは、ES6コード（BabelまたはTraceurを使用）またはプラグインを使用してTypeScriptやCoffeeScriptなどの他の言語を透過することもできます。モジュールをインポートする前に、これらのことをSystem.config（{...}）内で構成します。

  jspmはSystemJSを使用してパッケージとその依存関係を管理するため、パッケージを適切な順序に配置することを心配する必要はありません。

  JSPMとSystemJSが何であるかがわかったので、それらの使用方法を見てみましょう。

  環境のセットアップ

  まだいない場合は、node.jsをインストールする必要があります。これを行うための特に簡単な方法は、バージョンマネージャー（NVMなど）を使用することであり、このクイックヒントに詳述されています。ノードで稼働したら、コマンドラインから以下を実行してJSPMをグローバルにインストールできます。

  JSPMコマンドラインインターフェイスを使用できます。プロジェクトをセットアップしましょう：

  これにより、New-Projectという名前のディレクトリが作成され、NPMプロジェクトの初期化とJSPMがローカルにインストールされます。これは、プロジェクトのJSPMバージョンをロックし、グローバルJSPMへのアップグレードがアプリケーションの動作を変更しないことを保証するため、推奨されることを行う方法です。 このアプローチのもう1つの利点は、プロジェクトが継続的な統合ビルドを通じて展開されている場合、サーバーにもグローバルにJSPMをインストールする必要があるのではなく、ローカルJSPMパッケージを使用するようにビルドプロセスを構成できることです。

  <span>npm install -g jspm
  </span>

  JSPM -Vを使用してローカルバージョンを確認できます。
  プロジェクトでJSPMを使用するには、次のコマンドを実行します。

  <span>mkdir new-project && cd new-project
  </span><span>npm init -y
  </span><span>npm install jspm --save-dev
  </span>

  いくつかの設定を求められ、Enterを押してデフォルト値を受け入れるか、異なる値を入力して変更します。次のスクリーンショットは、コマンドがデフォルト設定で実行されたときのインスタンスを示しています。

  ディレクトリの構造と構成

  これにより、プロジェクトのルートにconfig.jsという名前のファイルと、jspm_packagesという名前のフォルダーが作成されます。 jspm_packagesフォルダーの内側を覗くと、表示されます：
  a github sub-directory
  npm sub-directory
  • SystemJSモジュールローダーのメインファイル
  JSPMがGitHubおよびNPMディレクトリを作成している理由は、これらのレジストリの上にピギーバックをかけて、単にNPMまたはGitHubパッケージをリクエストしたものをエイリアスするだけです。さらに、GitHubディレクトリにはGithubからJSONファイルをロードするSystemJSプラグインが含まれており、NPMディレクトリにはES6コードを透過するために必要なBabel関連のパッケージが含まれています
  config.jsファイルは主にSystemJS用です。開くと、さまざまなソースからのパッケージのパスに設定された構成オプション、バベルのオプション、パッケージの名前マップが簡単に参照できることがわかります。このファイルは、JSPMを使用して新しいパッケージをインストールすると自動的に更新されます。

  コマンドはPackage.jsonファイルも更新し、JSPMのセクションを追加します。 initコマンドでインストールされたバベルパッケージは、プロジェクトの開発セクションに追加されます。

  - saveオプションの有無にかかわらずJSPMコマンドを使用してインストールされた新しいパッケージは、Theedependenciesセクションに追加されるため、生産依存関係になります。 -save-devオプションを使用してインストールすると、依存関係が開発時間依存関係になり、devdependenciesセクションに保存されます。

  最後に、JSPMは、JSPMコマンドを使用してインストールされているすべてのパッケージに対して、config.jsファイルのマップセクションへのエントリを追加します。マッピングされた名前は、プロジェクト全体のJavaScriptファイルにライブラリをロードするために使用できます。パッケージの依存関係もマップセクションに追加されます。以下は、jqueryとjquery-uiのパッケージがどのようにマッピングされ、依存関係が定義されているかを示すconfig.jsファイルのマップセクションからのフラグメントです。

  <span>npm install -g jspm
  </span>

  興味のあるポイントとして、モジュールをインストールするときにこれらのマッピングを自動的に生成することもできます。

  これにより、アプリの他の場所に次のことを書くことができます。

  <span>mkdir new-project && cd new-project
  </span><span>npm init -y
  </span><span>npm install jspm --save-dev
  </span>

  jspmおよびsystemjs in action

  この記事に付随するために、私はシンプルなウィキペディア検索サンプルを作成しました。 GitHubリポジトリはこちらをご覧ください。 JSPM initコマンドのデフォルトオプションを使用してセットアップされるため、babelをES6トランスピラーとして使用します。また、JSPMを使用してインストールされているライブラリJQueryとBootstrapも使用します。ブートストラップにはjQueryが必要なため、jspmはconfig.jsファイルにマッピングを作成して、bootstrapを読み込む前にjqueryを読み込みます。

  <span>npm install -g jspm
  </span>

  リポジトリの名前が示唆するように、Wikipedia検索APIを照会し、ビューで受信したデータを表示します。 jQueryの$ .ajax（）を使用してAPIに電話をかけ、ページに結果を表示し、モーダルポップアップに記事のスニペットを表示するリンクがあります。サンプルには、スクリプトフォルダーの下に3つのJavaScriptファイルがあります。

  Search.js：このファイルはAMDスタイルモジュールを使用します。 JQueryを依存関係としてロードし、Wikipedia Search APIにAJAX呼び出しを行います。モジュールは、他の消費モジュールがパラメーターで呼び出すことができる関数を返します。
  • summaryModal.js：このファイルはES6スタイルモジュールを使用します。 BootstrapのJavaScriptライブラリをロードします。次に、モーダルポップアップに表示する前に、逃げたHTMLを受け入れ、HTMLテキストをunescapeで受け入れる関数をエクスポートします。
  display.js：このファイルは、CommonJSスタイルモジュールを使用します。上記のファイルの両方を依存関係としてロードします。 search.jsによって公開されたメソッドを呼び出して結果を取得し、このデータをUIのHTMLテーブルにレンダリングします。さらに、summaryModal.jsによって公開されたメソッドを使用して、テーブルのリンクボタンをクリックするとモーダルを表示します。
  • すでに述べたように、SystemJSはJavaScriptのすべてのモジュールシステムを理解しています。 systemjsを使用して上記の3つのファイルすべてをすべてロードできます。 これらのスクリプトを実行するには、HTMLページにSystem.jsとconfig.jsをロードする必要があります。その後、SystemJSモジュールローダーを使用してdisplay.jsファイルをロードします。このファイルはリポジトリ内の他のファイルを参照し、これらのファイルは必要なライブラリをロードするため、他のファイルをロードする必要はありません。
  Systemjsは、Babelを使用してその場でES6ファイルを輸送し、ブラウザで実行します。これがこれがどのように見えるかの（わずかに単純化された）デモです。
  • ただし、その場での移動はパフォーマンスに悪いことであり、生産アプリケーションでは使用すべきではありません。 JSPMがモジュールバンドラーであることを忘れないでください。
  バンドリング
  次のコマンドを使用して、アプリケーション全体のバンドルを作成できます。
  このコマンドは次のとおりです

  <span>mkdir new-project && cd new-project
  </span><span>npm init -y
  </span><span>npm install jspm --save-dev
  </span>

  すべてのファイルとライブラリをbuild.js ファイルで使用されているモジュールシステムをSystemJSスタイルモジュールに変換
  デバッグ中にロードされるソースマップファイルを作成

  ここで、build.jsファイルをindex.htmlファイルにロードする必要があります。参照の更新されたセットは次のとおりです

  $ jspm <span>-v
  </span><span>0.16.34
  </span>Running against <span>local jspm install.
  </span>

  モジュールdisplay.jsをロードするためのインポートステートメントを削除しなかったことに注意してください。このステートメントはファイルをロードするのではなく、代わりにbuild.jsファイルで既に利用可能なSystemJSモジュールをロードします。

  プロジェクトのreadmeファイルの指示に従って実行できます。開発者ツールの個々のファイルのコードを閲覧して、それらをデバッグできます。

  結論
  JSPMとSystemJSの組み合わせは、依存関係のインストールとロードの統一された方法を提供します。このツールは、依存関係の管理を容易にするだけでなく、ドアを開けて、今日のブラウザで将来のモジュールシステムを使用します。私が実証したように、JSPMはセットアップと使用が簡単です。その人気の高まりに貢献している2つの理由。

  プロジェクトでJSPMを使用していますか？なぜ？なぜだめですか？以下のコメントでお知らせください。

  モジュラーJavaScript、SystemJS、およびJSPM

  に関するよくある質問（FAQ） ​​

  systemjsとwebpackはどちらもモジュールバンドラーですが、いくつかの重要な違いがあります。 SystemJSは、ES6モジュール、AMD、CommonJS、およびグローバルスクリプトをブラウザおよびNodeJSにロードするユニバーサルダイナミックモジュールローダーです。バンドラーというよりもモジュールローダーのようなものです。一方、Webpackは、最新のJavaScriptアプリケーション用の静的モジュールバンドラーです。アプリケーションのニーズが必要なすべてのモジュールを含む依存関係グラフを構築し、それらを1つ以上のバンドルにパッケージ化します。次のコマンドを使用してインストールできます。NPMインストールSystemJS。インストール後、 'Systemjs'からImport {System}を使用してプロジェクトにインポートできます。 SystemJSのパッケージマネージャー。パッケージのインストールと管理のプロセスを簡素化します。また、NPM、GitHub、およびその他のソースからパッケージをインストールする統一方法も提供します。 JSPMはトランスピレーションを処理することもできます。これにより、ES6またはTypeScriptでコードを書き込み、ES5に自動的に透過しています。 System.import（）メソッドを使用できます。この方法は、モジュールに解決する約束を返します。例は次のとおりです。System.import（ 'path/to/module.js'）。then（function（module）{/ * module */}を使用）。

  はい、systemjsはnode.jsで使用できます。ブラウザとnode.jsの両方で動作するユニバーサルモジュールローダーを提供します。これにより、クライアントとサーバー間で共有できるコードを作成できます。 SystemJS構成でモジュールのパスと依存関係を指定できます。モジュールがロードされると、SystemJSは依存関係も自動的にロードします。

  モジュラーjavaScriptを使用することの利点は何ですか？

  Modular JavaScriptはいくつかの利点を提供します。これにより、コードがより整理され、管理が容易になります。これにより、アプリケーションのさまざまな部分でコードを再利用できます。また、各モジュールを個別にテストできるため、コードを簡単にテストできます。この方法は、構成オプションを指定するオブジェクトを受け入れます。構成できるオプションには、パス、マップ、パッケージ、トランスピラーが含まれます。 Angular、React、およびVue.JS.これらのフレームワークのいずれかからモジュールをロードできるユニバーサルモジュールローダーを提供します。これは、特にユニバーサルモジュールローダーが必要なプロジェクトのために、JavaScriptエコシステムの重要な部分です。 JavaScriptとWebテクノロジーの継続的な開発により、SystemJSは開発者のニーズを満たすために進化し続ける可能性があります。

以上がモジュラーJavaScript：SystemJS＆JSPMの初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。