EmberJS - Gestión de dependencias

Ember usa NPM y Bower para administrar las dependencias que se definen en package.json para NPM y bower.json para Bower. Por ejemplo, es posible que necesite instalar SASS para sus hojas de estilo que no está instalado por Ember mientras desarrolla la aplicación Ember. Para lograr esto, use los complementos de Ember para compartir las bibliotecas reutilizables. Si desea instalar cualquier marco CSS o dependencias de selector de fechas de JavaScript, utilice el administrador de paquetes de Bower.

Complementos

La CLI de Ember se puede utilizar para instalar los complementos de Ember mediante el siguiente comando:

ember install ember-cli-sass

El comando de instalación de ember guardará todas las dependencias en el archivo de configuración respectivo.

Cenador

Es un administrador de paquetes para la web que gestiona los componentes de HTML, CSS, JavaScript o archivos de imagen. Básicamente, mantiene y monitorea todos los paquetes y examina nuevas actualizaciones. Utiliza el archivo de configuración bower.json para realizar un seguimiento de las aplicaciones ubicadas en la raíz del proyecto CLI de Ember.

Puede instalar las dependencias del proyecto mediante el siguiente comando:

bower install <dependencies> --save

Bienes

Puede colocar el JavaScript de terceros en el proveedor / carpeta de su proyecto que no está disponible como un paquete Addon o Bower y colocar los propios activos como robots.txt, favicon, etc.en la carpeta pública / de su proyecto. Las dependencias que no instala Ember durante el desarrollo de la aplicación Ember deben incluirse mediante el archivo de manifiesto ember-cli-build.js .

Módulos AMD JavaScript

Puede dar la ruta del activo como primer argumento y la lista de módulos y exportaciones como segundo argumento. Puede incluir estos activos en el archivo de manifiesto ember-cli-build.js como:

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

Activos específicos del medio ambiente

Los diferentes activos se pueden usar en diferentes entornos definiendo el objeto como primer parámetro, que es un nombre de entorno y el valor de un objeto debe usarse como activo en ese entorno. En el archivo de manifiesto ember-cli-build.js , puede incluir como:

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

Otros activos

Una vez que todos los activos se colocan en la carpeta public / , se copiarán en el directorio dist /. Por ejemplo, si copia un favicon ubicado en la carpeta public / images / favicon.ico , este se copiará en el directorio dist / images / favicon.ico . Los activos de terceros se pueden agregar manualmente en el proveedor / carpeta o usando el administrador de paquetes de Bower a través de la opción de importación () . Los activos que no se agregan usando la opción import () , no estarán presentes en la compilación final.

Por ejemplo, considere la siguiente línea de código que importa los activos a la carpeta dist / .

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

La línea de código anterior crea un archivo de fuente en dist / font-awesome / fonts / fontawesomewebfont.ttf . También puede colocar el archivo anterior en una ruta diferente como se muestra a continuación:

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

Copiará el archivo de fuente en dist / assets / fontawesome-webfont.ttf .