Manière correcte d'importer tous les actifs de la bibliothèque externe avec Ember CLI

Question

Je travaille sur un projet Ember.js et j'aimerais tirer parti de la bibliothèque Slick Carousel. J'ai installé la bibliothèque via Bower dans mon dossier de projet, et j'ai du mal à l'importer dans mon projet.

Dans mes Ember-cli-build.js, j'ai ajouté des déclarations d'importation comme suit:

app.import('bower_components/slick-carousel/slick/slick.css'); 
app.import('bower_components/slick-carousel/slick/slick-theme.css'); 
app.import('bower_components/slick-carousel/slick/slick.js'); 

La question que je suis en cours d'exécution en est que le reste des actifs nécessaires ne soit pas construit et inclus dans le dossier dist quand je fais une construction (polices, assets, etc.), conduisant à des erreurs avec les polices manquantes et les assets présents dans le dossier "bower_components/slick-carrousel", mais pas dans la construction de ma vraie application Ember . Edit: Il semble que Broccoli-entonnoir était ce dont j'avais besoin. Le problème a été résolu en spécifiant les fichiers sources du dossier 'bower_components' et en pointant le chemin relatif vers le dossier 'dist' dans le fichier ember-cli-build.js.

A noter: Le plugin 'broccoli-static-compiler' communément référencé ailleurs comme solution est déconseillé, avec l'utilisation de 'broccoli-entonnoir' comme plugin recommandé.

Answer 1

Broccoli-funnel a fini par être ce que je cherchais. En plaçant le code suivant à l'intérieur de ember-cli-build.js, les fichiers nécessaires seront placés dans le bon répertoire lors de la construction:

var Funnel = require('broccoli-funnel'); 
var requiredAssets = new Funnel('bower_components/slick-carousel/slick/fonts', { 
     srcDir: '/', 
     include: ['**/*.*'], 
     destDir: '/assets/fonts' 
}); 
return app.toTree([requiredAssets]);