Forma recomendada de incluir la biblioteca de arranque en la aplicación Ember.JS ember-cli


80

Estoy intentando instalar Twitter Bootstrap correctamente en mi proyecto actual ember-cli. Instalé bootstrap con bower:

bower install --save bootstrap

Ahora la biblioteca se descarga en / vendor / bootstrap / dist / (css | js | fonts) Probé lo que se menciona aquí: http://ember-cli.com/#managing-dependencies reemplazando la ruta y los nombres de los archivos css pero obtengo errores relacionados con el archivo Brocfile.js . Creo que el formato de archivo broc ha cambiado demasiado en comparación con el ejemplo.

También intenté @importar con el archivo /app/styles/app.css después de mover las hojas de estilo en el directorio / app / styles /:

@import url('/assets/bootstrap.css');
@import url('/assets/bootstrap-theme.css');

Pero no funcionó. Los archivos son visibles en el verdadero servidor de desarrollo:http://localhost:4200/assets/bootstrap.css

¿Alguien puede tirarme un hueso aquí?

Gracias

Editar:

ember -v
ember-cli 0.0.23

brocfile.js

    /* global require, module */

var uglifyJavaScript = require('broccoli-uglify-js');
var replace = require('broccoli-replace');
var compileES6 = require('broccoli-es6-concatenator');
var validateES6 = require('broccoli-es6-import-validate');
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');

var env = require('broccoli-env').getEnv();
var getEnvJSON = require('./config/environment');

var p = require('ember-cli/lib/preprocessors');
var preprocessCss = p.preprocessCss;
var preprocessTemplates = p.preprocessTemplates;
var preprocessJs = p.preprocessJs;

module.exports = function (broccoli) {

  var prefix = 'caisse';
  var rootURL = '/';

  // index.html

  var indexHTML = pickFiles('app', {
    srcDir: '/',
    files: ['index.html'],
    destDir: '/'
  });

  indexHTML = replace(indexHTML, {
    files: ['index.html'],
    patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
  });

  // sourceTrees, appAndDependencies for CSS and JavaScript

  var app = pickFiles('app', {
    srcDir: '/',
    destDir: prefix
  });

  app = preprocessTemplates(app);

  var config = pickFiles('config', { // Don't pick anything, just watch config folder
    srcDir: '/',
    files: [],
    destDir: '/'
  });

  var sourceTrees = [app, config, 'vendor'].concat(broccoli.bowerTrees());
  var appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });

  // JavaScript

  var legacyFilesToAppend = [
    'jquery.js',
    'handlebars.js',
    'ember.js',
    'ic-ajax/dist/named-amd/main.js',
    'ember-data.js',
    'ember-resolver.js',
    'ember-shim.js',
    'bootstrap/dist/js/bootstrap.js'
  ];

  var applicationJs = preprocessJs(appAndDependencies, '/', prefix);

  applicationJs = compileES6(applicationJs, {
    loaderFile: 'loader/loader.js',
    ignoredModules: [
      'ember/resolver',
      'ic-ajax'
    ],
    inputFiles: [
      prefix + '/**/*.js'
    ],
    legacyFilesToAppend: legacyFilesToAppend,
    wrapInEval: env !== 'production',
    outputFile: '/assets/app.js'
  });

  if (env === 'production') {
    applicationJs = uglifyJavaScript(applicationJs, {
      mangle: false,
      compress: false
    });
  }

  // Styles

  var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');

  // Bootstrap Style integration
  var bootstrap = pickFiles('vendor', {
    srcDir: '/bootstrap/dist/css',
    files: [
      'bootstrap.css',
      'bootstrap-theme.css'
    ],
    destDir: '/assets/'
  });

//var bootstrap = preprocessCss(appAndDependencies, '/vendor/bootstrap/dist/css', '/assets');

  // Ouput

  var outputTrees = [
    indexHTML,
    applicationJs,
    'public',
    styles,
    bootstrap
  ];

  // Testing

  if (env !== 'production') {

    var tests = pickFiles('tests', {
      srcDir: '/',
      destDir: prefix + '/tests'
    });

    var testsIndexHTML = pickFiles('tests', {
      srcDir: '/',
      files: ['index.html'],
      destDir: '/tests'
    });

    var qunitStyles = pickFiles('vendor', {
      srcDir: '/qunit/qunit',
      files: ['qunit.css'],
      destDir: '/assets/'
    });

    testsIndexHTML = replace(testsIndexHTML, {
      files: ['tests/index.html'],
      patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
    });

    tests = preprocessTemplates(tests);

    sourceTrees = [tests, 'vendor'].concat(broccoli.bowerTrees());
    appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });

    var testsJs = preprocessJs(appAndDependencies, '/', prefix);

    var validatedJs = validateES6(mergeTrees([app, tests]), {
      whitelist: {
        'ember/resolver': ['default'],
        'ember-qunit': [
          'globalize',
          'moduleFor',
          'moduleForComponent',
          'moduleForModel',
          'test',
          'setResolver'
        ]
      }
    });

    var legacyTestFiles = [
      'qunit/qunit/qunit.js',
      'qunit-shim.js',
      'ember-qunit/dist/named-amd/main.js'
    ];

    legacyFilesToAppend = legacyFilesToAppend.concat(legacyTestFiles);

    testsJs = compileES6(testsJs, {
      // Temporary workaround for
      // https://github.com/joliss/broccoli-es6-concatenator/issues/9
      loaderFile: '_loader.js',
      ignoredModules: [
        'ember/resolver',
        'ember-qunit'
      ],
      inputFiles: [
        prefix + '/**/*.js'
      ],
      legacyFilesToAppend: legacyFilesToAppend,

      wrapInEval: true,
      outputFile: '/assets/tests.js'
    });

    var testsTrees = [qunitStyles, testsIndexHTML, validatedJs, testsJs];
    outputTrees = outputTrees.concat(testsTrees);
  }

  return mergeTrees(outputTrees, { overwrite: true });
};

¿Puede mostrar su versión ember-cli y el contenido de Brocfile.js?
Marcio Junior

También se incluye a través de index.html después de copiar en / styles funcionó. <link rel = "stylesheet" href = "assets / bootstrap.css"> <link rel = "stylesheet" href = "assets / bootstrap-theme.css">
Guidouil

Respuestas:


39

Es posible que desee consultar ember-bootstrap , que importará los activos de bootstrap automáticamente.

ember install ember-bootstrap

Además, agrega un conjunto de componentes ember nativos a su aplicación, que facilitan mucho el trabajo con las funciones de arranque en ember. ¡Compruébalo, aunque soy un poco parcial, ya que soy el autor! ;)


1
Este comando es suficiente para transformar cualquier proyecto ember existente en bootstrap. Gracias Simon.
Raja Nagendra Kumar

¡Ember-bootstrap es EXCELENTE! Sin embargo, un componente que falta en esto es el carrusel. Si necesita que el carrusel funcione, deberá instalar los componentes de arranque mediante las instrucciones de @rastapasta; parece que ember-bootstrap no incluye transitions.js como parte de los activos de arranque que trae, y esto es REQUERIDO para el carrusel.
RyanNerd

@RyanNerd ¡Gracias! Sí, todavía falta el carrusel. ¡Pero debería agregarse con suerte en algún momento poco después del próximo lanzamiento 1.0!
Simon Ihmig

68

INTENTO:

bower install --save bootstrap

Brocfile.js:

app.import('vendor/bootstrap/dist/js/bootstrap.js');
app.import('vendor/bootstrap/dist/css/bootstrap.css');

El JS se agregará a app.js, que está vinculado de forma predeterminada, y se agregará el CSS assets/vendor.css, que a partir del 14 de mayo también se agregará de manera predeterminada.

Para referencia: http://www.ember-cli.com/#managing-dependencies

En respuesta a la pregunta de @ Joe sobre las fuentes y otros activos, no pude obtener el método app.import () recomendado para trabajar con las fuentes. En su lugar, opté por el enfoque de combinación de árboles y compilador estático:

var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var extraAssets = pickFiles('vendor/bootstrap/dist/fonts',{
    srcDir: '/', 
    files: ['**/*'],
    destDir: '/fonts'
});

module.exports = mergeTrees([app.toTree(), extraAssets]);

9
Y reinicie el servidor ya que los cambios en el archivo broc no serán recogidos automáticamente por Livereload ... creo :)
máximo

7
Si está utilizando ember-cli v0.0.35 o más reciente, es posible que deba incluir un par de complementos de Broccoli en su package.json. Puede agregarlos a través de: npm install --save-dev broccoli-merge-treesy npm install --save-dev broccoli-static-compiler.
Sean O'Hara

5
Tenga en cuenta que ahora 'vendor' ha sido reemplazado por 'bower_components' para cualquier cosa instalada con bower. La carpeta 'proveedor' todavía se puede usar para bibliotecas especificadas por el usuario.
SeanK

6
También puedes importar fuentes con app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });Consulta el siguiente enlace miguelcamba.com/blog/2014/08/10/…
Jose S

3
Parece que mi proyecto generado también solicitó boostrap.css.map, así que también agregué la línea de código a continuación. app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' });
consideRatio

45

INTENTO:

bower install --save bootstrap

Brocfile.js:

/* global require, module */

...


app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', {
    destDir: 'assets'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', {
    destDir: 'fonts'
});

app.import('bower_components/bootstrap/dist/js/bootstrap.js');

module.exports = app.toTree();

Este es un buen método para ember 1.9 hasta que ember-cli-bootstrap se golpea para construir para manillares> = 2.0
genkilabs

2
Los comandos que Sean O'Hara declaró en un comentario sobre la respuesta de Drew deben agregarse a esto:npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler
Timo

@TimoLehto ¿qué ventaja da cli sobre esta importación de broc?
SuperUberDuper

@SuperUberDuper, amigo. No entiendo la pregunta. ¿Qué cli? ¿De qué estás hablando?
Timo

@genkilabs no ve el punto del cli-bootstrap, es fácil como se muestra arriba
SuperUberDuper

23

Actualización 30/03/15

además de un cambio de ça ... Ahora uso ember-cli-bootstrap-sassy , parece traer consigo un mínimo de cruft mientras me permite personalizar las variables de Bootstrap.


Actualización 22/01/15

Probablemente debería usar la solución de Johnny anterior en lugar de la biblioteca que mencioné originalmente. También me gusta ember-cli-bootstrap-sass , porque puedo personalizar las variables de Bootstrap directamente en mi proyecto.

Original 11/7/14

Si está utilizando una versión de ember-cli que admite complementos (0.35+, creo), ahora puede usar el paquete ember-cli-bootstrap . Desde la raíz de su aplicación,

npm install --save-dev ember-cli-bootstrap

¡Eso es!

Nota: como señala @poweratom, ember-cli-bootstrapes la biblioteca de otra persona la que elige incluir también bootstrap-for-ember . Por lo tanto, esta lib podría desincronizarse con la versión oficial de bootstrap. Sin embargo, ¡todavía me parece una excelente manera de hacer prototipos rápidamente en un nuevo proyecto!


2
Cambie el actual a su versión actual. Actual hoy (0.0.39) tal vez ni siquiera sea la versión que está usando ...
Jacob van Lingen

Por ahora, ember-cli-bootstrap no incluye bootstrap.js, por lo que querrá poder utilizar métodos de javascript integrados o los diversos complementos.
dibujó covi

2
No estoy seguro si esta debería ser una forma "recomendada" de instalarlo per se. El proyecto 'The ember-cli-bootstrap' se basa en el proyecto 'bootstrap-for-ember'. Desafortunadamente, según el mantenedor de este último proyecto, anunció que ahora está trabajando en el proyecto 'ember-components' como su sucesor. Entonces, a menos que haya esfuerzos para continuar donde lo dejó (creo que ese proyecto actualmente usa bootstrap 3.0.0), la versión de Bootstrap se volverá obsoleta lo suficientemente pronto (ya lo está).
Poweratom

15
$> bower install --save bootstrap

Luego, agregue las siguientes dos líneas a su ember-cli-builds.js (o Brocfile.js si está usando una versión anterior de Ember.js):

app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');

¡Y voilà, listo para ir!

actualizado 18/08/2015: adaptado al nuevo esquema introducido en Ember.js 1.13


1
La última versión de ember-cli ya no incluye brocfile.js
Mad Scientist

5
@MadScientist, puede usar 'ember-cli-build.js' para importar, los pasos anteriores aún funcionan. (brasa: 1.12.6)
Alan Francis

¿Cómo se combina este enfoque con anulaciones de bootstrap como bootswatch.com/flatly
Benjamin Udink ten Cate

5

Así es como empaqueto los archivos CSS del proveedor con Broccoli (que sustenta Ember-cli).

 var vendorCss = concat('vendor', {
   inputFiles: [
     'pikaday/css/pikaday.css'
   , 'nvd3/nv.d3.css'
   , 'semantic-ui/build/packaged/css/semantic.css'
   ]
  , outputFile: '/assets/css/vendor.css'
  });

Donde el vendor carpeta donde viven mis paquetes Bower. Y assetses donde espero que viva mi CSS. Supongo que ha instalado Bootstrap usando Bower, que es la forma Ember-cli.

Luego, en mi index.html, simplemente estoy haciendo referencia a ese vendor.cssarchivo:

  <link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">

Salud.


Lo intenté pero me dice que concat no está definido en Broccoli (ReferenceError: concat no está definido) Agregué eso con solo cambiar la ruta a las hojas de estilo incluidas en el archivo: Brocfile.js en la raíz de la carpeta de la aplicación.
Guidouil

1
Instale el complemento npm install broccoli-concat --saveLuego en su Brocfile, en la parte superior:var concat = require('broccoli-concat');
Johnny Hall

5

Si está usando SASS (probablemente vía ember-cli-sass), bower_componentsse agrega automáticamente a la ruta de búsqueda. Esto significa que puede usar Bower y evitar el archivo Brocfile / ember-cli-build por completo.

Instale la versión oficial de SASS de Bootstrap con Bower

bower install --save bootstrap-sass

luego importe la lib en formato app.scss. Lo bueno de esto es que puede personalizar las variables antes de importar bootstrap:

$brand-primary: 'purple';

@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

o $ ember instalar ember-cli-sass $ ember instalar ember-cli-bootstrap-sassy luego cambiar el nombre de app.css a app.scss y agregarle esta línea: @import "bootstrap"
rmcsharry

3
bower install --save bootstrap

en tu brocfile.js:

app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.css');

No sé por qué esto fue rebajado. Puede que no esté muy claro a menos que sepa dónde colocar estas declaraciones. Pero funciona bien ... quizás no tan bien como el complemento, lo admito. van en el ember-cli-build.jsarchivo y funcionan bien si alguien lo necesita. Estoy alimentando mi brasa desde dentro como proyecto Asp.Net MVC y la necesitaba disponible para ese proyecto, no solo la aplicación de brasas.
hal9000

0

En la terminal (para aquellos que usan Node Package Manager)

npm install bootstrap --save

Usando ember-cli, para importar su bootstrap instalado

Abre el ember-cli-build.jsarchivo

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });
app.import('node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('node_modules/bootstrap/dist/js/bootstrap.min.js');

Eso lo hará si bootstrap se instala a través del instalador de NPM.

No hagas esto:

app.import('./node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('./node_modules/bootstrap/dist/js/bootstrap.min.js');
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.