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.