EmberJS - Gestion des dépendances

Ember utilise NPM et Bower pour gérer les dépendances qui sont définies dans package.json pour NPM et bower.json pour Bower. Par exemple, vous devrez peut-être installer SASS pour vos feuilles de style qui n'est pas installé par Ember lors du développement de l'application Ember. Pour ce faire, utilisez les modules complémentaires Ember pour partager les bibliothèques réutilisables. Si vous souhaitez installer un framework CSS ou des dépendances de datepicker JavaScript, utilisez le gestionnaire de packages Bower.

Addons

La CLI Ember peut être utilisée pour installer les modules complémentaires Ember à l'aide de la commande suivante -

ember install ember-cli-sass

La commande ember install enregistrera toutes les dépendances dans le fichier de configuration respectif.

Tonnelle

Il s'agit d'un gestionnaire de packages pour le web qui gère les composants des fichiers HTML, CSS, JavaScript ou image. Il maintient et surveille essentiellement tous les packages et examine les nouvelles mises à jour. Il utilise le fichier de configuration bower.json pour suivre les applications placées à la racine du projet Ember CLI.

Vous pouvez installer les dépendances du projet à l'aide de la commande suivante -

bower install <dependencies> --save

Les atouts

Vous pouvez placer le JavaScript tiers dans le dossier fournisseur / dossier de votre projet qui ne sont pas disponibles en tant que package Addon ou Bower et placer les propres actifs tels que robots.txt, favicon, etc. dans le dossier public / de votre projet. Les dépendances qui ne sont pas installées par Ember lors du développement de l'application Ember doivent être incluses à l'aide du fichier manifeste ember-cli-build.js .

Modules JavaScript AMD

Vous pouvez indiquer le chemin de l'actif comme premier argument et la liste des modules et des exportations comme deuxième argument. Vous pouvez inclure ces actifs dans le fichier manifeste ember-cli-build.js comme -

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

Actifs spécifiques à l'environnement

Les différents actifs peuvent être utilisés dans différents environnements en définissant un objet comme premier paramètre qui est un nom d'environnement et la valeur d'un objet doit être utilisée comme actif dans cet environnement. Dans le fichier manifeste ember-cli-build.js , vous pouvez inclure comme -

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

Autres actifs

Une fois que tous les actifs sont placés dans le dossier public / , ils seront copiés dans le répertoire dist /. Par exemple, si vous copiez un favicon placé dans le dossier public / images / favicon.ico , il sera copié dans le répertoire dist / images / favicon.ico . Les actifs tiers peuvent être ajoutés manuellement dans le dossier fournisseur / ou en utilisant le gestionnaire de packages Bower via l' option import () . Les actifs qui ne sont pas ajoutés à l'aide de l' option import () ne seront pas présents dans la version finale.

Par exemple, considérez la ligne de code suivante qui importe les actifs dans le dossier dist / .

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

La ligne de code ci-dessus crée un fichier de police dans dist / font-awesome / fonts / fontawesomewebfont.ttf . Vous pouvez également placer le fichier ci-dessus sur un chemin différent comme indiqué ci-dessous -

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

Il copiera le fichier de police dans dist / assets / fontawesome-webfont.ttf .