Ignite UI とパッケージ マネージャー

Ignite UI 有名な様々なパッケージ マネージャーを使用しプロジェクトの依存関係を管理することができます。NPN、yarn、JSPM を使用することができます。

手順 1: NPM の使用

これまでのレッスンでは、NPM を使用して、Ignite UI コントロールを使用しました。NPM がどのように動作するかを確認するには、こちらからプロジェクトをダウンロードしたのちに (こちらでプロジェクトの最終板もダウンロード可能です。)、ターミナルを開き、次のコマンドを実行します。

npm install

NPM install コマンドは依存関係にあるパッケージをインストールします。すべての依存するパッケージをインストールするために、package.json ファイルを参照します。また、NPM を使用するためには、NodeJS がインストールされている必要があります。NodeJS がインストールされていない場合は、NodeJS Web サイトからインストールできます。NPM install コマンドを実行すると、プロジェクトに node_modules が追加されます。このフォルダには、NPM install コマンドを使用してインストールされているすべてのライブラリが含まれます。

既存のプロジェクトで作業している場合は、プロジェクトに個別のパッケージをインストールできます。Ignite UI パッケージを個別にインストールするには、次のコマンドを実行します。

npm install igniteui-angular2

アプリケーションを動作させる場合は下記のコマンドを実行します。

npm start

Using NPM

手順 2: Yarn の使用

NPM は、最も人気のあるパッケージマネージャの一つですが、いくつかの欠点があります。

  • Windows 上で長いファイルパスを引き起こす入れ子になった依存関係
  • NPM は順次インストールのみを行うため、次のパッケージのインストールに移る前に1つのパッケージを完全にインストールする必要がある
  • NPMSJS パッケージからのみインストール可能であり、オフラインでのインストール方法を提供しない

Yarn はこれらの問題を解決します。Yarn は高速かつ、信頼性とセキュリティを備えたパッケージ マネージャーです。パッケージを NPMJS または bower レジストリから取得します。Yarn は NPM に比べて利点がありますが、NPM は広く使用され、最も有名なパッケージ マネージャーです。

Yarn の詳細ついては GitHub ページをご覧ください。

LNPM のように、Yarn は package.json ファイルを読み取り、プロジェクトに必要な依存関係をインストールします。

Yarn を使用するには、手順 1 においても使用したプロジェクトをダウンロードし、ターミナルで開きます。

Yarn がインストールされていない場合は、下記のコマンドでインストールする必要があります。

npm install –g yarn

注: Apple Mac OS を利用している場合、グローバル パッケージを NPM でインストールする場合、パーミッション エラーが発生する場合があります。その場合は下記のコマンドを実行します。

sudo npm install –g yarn

インストール後、Yarn を使用し、依存関係をプロジェクトにインストールすることができます。NPM のように Yarn は package.json を使用します。下記のコマンドを実行してください。

yarn install

既に存在するプロジェクトで使用する場合は、個別のパッケージをプロジェクトにインストールすることができます。Ignite UI をインストールする場合は下記のコマンド実行します。

yarn add igniteui-angular2

ンストールが完了した後、プロジェクトに node_modules フォルダーが追加されます。アプリケーションを実行する場合は下記のコマンドを実行します。

yarn start

全てが正しく設定されている場合、アプリケーションが実行され、下記のような画面が表示されます。

Working with Yarn

手順 3: ダイナミック モジュール ローダーの使用

SystemJS は、ES6 モジュール ローダー上に構築された実行時にモジュールをインポートできるモジュール ローダーです。ES6 コードまたは Typescript に対応しています。SystemJS は、AMD や CommonJS などの多くの種類のモジュール形式と共に動作します。SystemJS モジュール ローダーは、Ignite UI についてもサポートしています。

手順 1 でダウンロードしたプロジェクトで System.config.js ファイルを開くと下記のように Ignite UI Angular 2 がマッピングされていることを確認できます。

'igniteui-angular2': 'npm:igniteui-angular2'

加えて、Ignite UI パッケージが下記のようにロードされていることを確認できます。

'igniteui-angular2': {
  main: 'index.js',
  defaultExtension: 'js'
}

system.config.js に設定されているマッピング情報をもとに、Angular アプリケーションが Ignite UI モジュールを必要とした際に、SystemJS によって動的にロードされます。

結びに

Web 開発においてライブラリの参照追加は、長い道のり経ています。初期には手動で参照を追加し、次にコンテンツ配信ネットワーク (CDN) を使用して参照を追加していました。その後、bower、NPM、Yarn などの様々なパッケージ マネージャを使用するまでに至りました。Ignite UI  は CDN のような以前の方法を使用でき、また、NPM や Yarn のようなモダンなパッケージ マネージャにおいても使用できます。更に、パッケージ マネージャに加えて、SystemJS のようなモジュール ローダーにおいても使用できます。