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

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

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

手順 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 によって動的にロードされます。