EmberJS-依存関係の管理

Emberは、NPMのpackage.jsonおよびBowerの_bower.json_で定義されている依存関係の管理にNPMとBowerを使用します。たとえば、Emberアプリの開発中にEmberによってインストールされないSASSをスタイルシートにインストールする必要がある場合があります。これを実現するには、_Ember Addons_を使用して再利用可能なライブラリを共有します。 CSSフレームワークまたはJavaScript datepickerの依存関係をインストールする場合は、Bowerパッケージマネージャーを使用します。

アドオン

_Ember CLI_は、次のコマンドを使用してEmberアドオンをインストールするために使用できます-

ember install ember-cli-sass

_ember install command_は、すべての依存関係をそれぞれの構成ファイルに保存します。

バウアー

これは、HTML、CSS、JavaScript、または画像ファイルのコンポーネントを管理するWeb用のパッケージマネージャーです。基本的に、すべてのパッケージを維持および監視し、新しい更新を検査します。構成ファイル_bower.json_を使用して、Ember CLIプロジェクトのルートに配置されたアプリケーションを追跡します。

次のコマンドを使用して、プロジェクトの依存関係をインストールできます-

bower install <dependencies> --save

資産

サードパーティのJavaScriptをプロジェクトの_vendor/_フォルダーに配置します。これらはアドオンパッケージまたはBowerパッケージとしては使用できず、robots.txt、faviconなどの独自のアセットを配置できます。プロジェクトの_public/_フォルダー内。 Emberアプリの開発中にEmberによってインストールされない依存関係は、マニフェストファイル_ember-cli-build.js_を使用して含める必要があります。

AMD JavaScriptモジュール

最初の引数としてアセットパスを指定し、2番目の引数としてモジュールとエクスポートのリストを指定できます。これらのアセットを_ember-cli-build.js_マニフェストファイルに含めることができます-

app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
   exports: {
      'ic-ajax': [
         'default',
         'defineFixture',
         'lookupFixture',
         'raw',
         'request'
      ]
   }
});

環境固有の資産

オブジェクトを環境名である最初のパラメーターとして定義することにより、異なる環境で異なる資産を使用でき、オブジェクトの値はその環境の資産として使用する必要があります。 _ember-cli-build.js_マニフェストファイルでは、次のように含めることができます-

app.import ({
   development: 'bower_components/ember/ember.js',
   production:  'bower_components/ember/ember.prod.js'
});

その他の資産

すべてのアセットが_public/_フォルダーに配置されると、それらはdist/ディレクトリーにコピーされます。たとえば、_public/images/favicon.ico_フォルダーにあるファビコンをコピーすると、_dist/images/favicon.ico_ディレクトリーにコピーされます。サードパーティのアセットは、_vendor/_フォルダーに手動で追加するか、_import（）_オプションを介してBowerパッケージマネージャーを使用して追加できます。 _import（）_オプションを使用して追加されていないアセットは、最終ビルドには存在しません。

たとえば、アセットを_dist/_フォルダーにインポートする次のコード行を考えます。

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');

上記のコード行は、_dist/font-awesome/fonts/fontawesomewebfont.ttf_にフォントファイルを作成します。以下に示すように、上記のファイルを別のパスに配置することもできます-

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
   destDir: 'assets'
});

_dist/assets/fontawesome-webfont.ttf_にあるフォントファイルをコピーします。

Emberjs-managing-dependencies

目次