Рекомендуемый способ включить библиотеку bootstrap в Ember.JS ember-cli App


Я пытаюсь правильно установить Twitter Bootstrap в моем текущем проекте ember-cli. Я установил bootstrap с bower:

bower install --save bootstrap

теперь библиотека понижена в / vendor / bootstrap / dist/(css / js / fonts) Я попробовал то, что упоминается здесь : http://ember-cli.com/#managing-dependencies замена имен файлов path и css, но я получаю ошибки относительно Brocfile.js. Я думаю, что формат brocfile слишком сильно изменился по сравнению к примеру.

Я также попытался @ import с / app / styles / app.css файл после перемещения таблиц стилей в каталог/app/ styles/:

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

но это не сработало. Файлы видны true dev server:http://localhost:4200/assets/bootstrap.css

может кто-нибудь бросить мне кость здесь ?

Thx

Edit:

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 });
};
8 77

8 ответов:

вы, возможно, захотите, чтобы проверить ember-bootstrap, который будет импортировать загрузочные активы автоматически.

ember install ember-bootstrap

кроме того, он добавляет набор собственных компонентов ember в ваше приложение, что делает работу с функциями bootstrap намного проще в ember. Проверьте это, хотя я немного предвзят, так как я его автор! ;)

Баш:

bower install --save bootstrap

Brocfile.js:

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

JS будет добавлен в приложение.js, который связан по умолчанию, и CSS будет добавлен в assets/vendor.css, которая по состоянию на 14 мая, также добавляется по умолчанию.

для справки:http://www.ember-cli.com/#managing-dependencies

в ответ на вопрос @Joe о шрифтах и других активах я не смог получить рекомендуемое приложение.метод import() для работы со шрифтами. Я вместо этого выбрали метод слияния деревьев и статического компилятора:

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]);

Баш:

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();

обновление 3/30/15

плюс перемен... Я использую ember-cli-bootstrap-sassy теперь, похоже, он приносит с собой минимальный cruft, все еще позволяя мне настраивать переменные Bootstrap.


обновление 1/22/15

вы, вероятно, должны использовать решение Джонни выше, а не lib, о котором я первоначально упоминал. Мне тоже нравится ember-cli-bootstrap-sass, потому что я могу настроить переменные Bootstrap непосредственно в моем проект.

оригинальный 7/11/14

если вы используете версию ember-cli, которая поддерживает аддоны (0.35+, я считаю), теперь вы можете использовать ember-cli-bootstrap пакета. Из корня вашего приложения,

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

вот именно!

Примечание: как указывает @poweratom,ember-cli-bootstrap Это чужая библиотека, которая также включает bootstrap-for-ember. Таким образом, эта библиотека может выйти из синхронизации с официальным bootstrap версия. Тем не менее, я все еще считаю, что это отличный способ быстро получить прототипирование в новом проекте!

$> bower install --save bootstrap

затем добавьте следующие две строки в свой Эмбер-cli-строит.js (или Brocfile.js если вы используете старую версию Эмбер.js):

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

и вуаля, готово!

обновлено 08/18/2015: адаптирован к новой схеме, введенной в Ember.js 1.13

вот как я упаковываю CSS-файлы поставщика с брокколи (которая лежит в основе 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'
  });

здесь vendor папка, где живут мои пакеты Bower. И assets где я ожидаю, что мой CSS будет жить. Я предполагаю, что вы установили Bootstrap с помощью Bower, который является способом Ember-cli.

тогда в моем указателе.html, я просто ссылаюсь на это vendor.css file:

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

ваше здоровье.

если вы используете SASS (вероятно, через ember-cli-sass),bower_components автоматически добавляется в путь поиска. Это означает, что вы можете просто использовать Bower и полностью избегать файла Brocfile/ember-cli-build.

установите официальную версию Sass Bootstrap с Bower

bower install --save bootstrap-sass

затем импортируйте lib в app.scss. Самое приятное в этом то, что вы можете настроить переменные перед импортом bootstrap:

$brand-primary: 'purple';

@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
bower install --save bootstrap

в своем brocfile.js:

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