Рекомендуемый способ включения библиотеки начальной загрузки в приложение Ember.JS ember-cli

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

bower install --save bootstrap

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

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

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

Но не вышло. В файлах виден настоящий dev server: http://localhost:4200/assets/bootstrap.css

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

Спасибо

Редактировать :

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

person Guidouil    schedule 28.04.2014    source источник
comment
Можете ли вы показать свою версию ember-cli и содержимое Brocfile.js?   -  person Marcio Junior    schedule 29.04.2014
comment
Также в том числе через index.html после копирования в / styles. ‹Ссылка rel = таблица стилей href = assets / bootstrap.css› ‹ссылка rel = таблица стилей href = assets / bootstrap-theme.css›   -  person Guidouil    schedule 29.04.2014


Ответы (9)


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

ember install ember-bootstrap

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

person Simon Ihmig    schedule 12.11.2015
comment
Этой команды достаточно, чтобы преобразовать любой существующий проект ember для начальной загрузки. Спасибо, Саймон. - person Raja Nagendra Kumar; 01.04.2016
comment
ember-bootstrap ОТЛИЧНО! Однако здесь отсутствует карусель. Если вам нужно, чтобы карусель работала, вам нужно будет установить компоненты начальной загрузки с помощью инструкций @rastapasta - похоже, что ember-bootstrap не включает transitions.js как часть загружаемых ресурсов начальной загрузки, и это ТРЕБУЕТСЯ для карусели. - person RyanNerd; 20.12.2016
comment
@RyanNerd Спасибо! Да, карусели все еще нет. Но, надеюсь, он будет добавлен вскоре после выхода релиза 1.0! - person Simon Ihmig; 23.12.2016

БАШ:

bower install --save bootstrap

Brocfile.js:

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

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

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

В ответ на вопрос @Jo о шрифтах и ​​других ресурсах я не смог заставить рекомендованный метод app.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]);
person drew covi    schedule 13.05.2014
comment
Спасибо, Дэйв! Забыл, что cli изначально не отображает vendor.css. - person drew covi; 14.05.2014
comment
Это обрабатывает файлы, которые LESS включает, например шрифты? - person Joe; 20.05.2014
comment
И перезапустите сервер, так как Livereload автоматически не улавливает изменения в brocfile ... Я думаю :) - person max; 25.05.2014
comment
Если вы используете ember-cli v0.0.35 или новее, вам может потребоваться включить пару плагинов Broccoli в свой package.json. Вы можете добавить их через: npm install --save-dev broccoli-merge-trees и npm install --save-dev broccoli-static-compiler. - person Sean O'Hara; 23.06.2014
comment
Обратите внимание, что теперь "vendor" был заменен на "bower_components" для всего, что установлено с bower. Папка vendor по-прежнему может использоваться для пользовательских библиотек. - person SeanK; 11.11.2014
comment
Вы также можете импортировать шрифты с app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });. Проверьте следующую ссылку miguelcamba.com/blog/2014/08/10/ - person Jose S; 18.11.2014
comment
Похоже, что мой сгенерированный проект также запросил boostrap.css.map, поэтому я также добавил строку кода ниже. app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' }); - person consideRatio; 03.12.2014
comment
Brocfile.js больше нет; теперь это больше похоже на ember-cli-build.js, к которому вам нужно добавить операторы app.import. - person Per Lundberg; 11.09.2016

BASH:

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();
person Patrick Seastar    schedule 24.11.2014
comment
Это хороший метод для ember 1.9, пока ember-cli-bootstrap не будет создан для руля ›= 2.0 - person genkilabs; 13.12.2014
comment
К этому следует добавить команды, которые Шон О'Хара сказал в комментарии к ответу Дрю: npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler - person Timo; 14.12.2014
comment
@TimoLehto, какое преимущество дает cli по сравнению с этим импортом брокера? - person SuperUberDuper; 11.03.2015
comment
@SuperUberDuper, приятель. Я не понимаю вопрос. Какой кли? О чем ты говоришь? - person Timo; 12.03.2015
comment
@genkilabs не видит смысла cli-bootstrap, это просто, как показано выше - person SuperUberDuper; 12.03.2015
comment
@TimoLehto, пожалуйста, посмотрите мою коммуникацию - person SuperUberDuper; 12.03.2015
comment
Кто что говорит про cli-bootsrap? Не я. Я смущен. Я только сказал, что вам нужно также установить broccoli-merge-tree broccoli-static-compiler, чтобы эта работа работала. Ничего о cli-bootsrap. - person Timo; 13.03.2015
comment
@SuperUberDuper Причина использования cli-bootstrap (IMO) заключается в том, что он не только поддерживает установку начальной загрузки в соответствии с другими надстройками cli, но и более понятен и воспроизводим для больших команд, создающих несколько приложений по стандарту или нанимающих и обучение новых разработчиков. Конечно, это не имеет значения для небольших команд или игрушечных приложений, но использование последовательных практик, установок и дополнений может помочь уменьшить количество ошибок при промышленной разработке. - person genkilabs; 13.03.2015
comment
@TimoLehto Изначально вопрос касается установки в среде Ember-CLI; это в названии. - person genkilabs; 13.03.2015
comment
@genkilabs, спасибо, но я все еще не уверен, что это довольно просто для команд с начальной загрузкой в ​​bower и деревьями слияния в Brocfile, что происходит, + вы можете легко изменить версию начальной загрузки. - person SuperUberDuper; 13.03.2015

Обновление 30.03.15

плюс изменение ça ... Сейчас я использую ember-cli-bootstrap-sassy, похоже, это приносит минимум хлопот, но позволяет мне настраивать переменные Bootstrap.


Обновление от 22.01.15

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

Оригинал 11.07.14

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

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

Вот и все!

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

person Sam Selikoff    schedule 11.07.2014
comment
Измените текущую версию на вашу текущую. Текущая сегодня (0.0.39), возможно, даже не та версия, которую вы используете ... - person Jacob van Lingen; 14.07.2014
comment
На данный момент ember-cli-bootstrap не включает bootstrap.js, поэтому вы хотите иметь возможность использовать встроенные методы javascript или различные плагины. - person drew covi; 20.08.2014
comment
Я не уверен, следует ли рекомендовать этот способ установки как таковой. Проект ember-cli-bootstrap основан на проекте bootstrap-for-ember. К сожалению, по словам сопровождающего последнего проекта, он объявил, что теперь вместо этого работает над проектом «ember-components». Поэтому, если не будет предпринято попыток продолжить с того места, на котором он остановился (я считаю, что в этом проекте в настоящее время используется bootstrap 3.0.0), версия Bootstrap скоро устареет (уже есть). - person poweratom; 05.11.2014

$> bower install --save bootstrap

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

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

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

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

person rastapasta    schedule 01.07.2015
comment
Последняя версия ember-cli больше не включает файл brocfile.js - person Mad Scientist; 04.08.2015
comment
@MadScientist, вы можете использовать 'ember-cli-build.js' для импорта, шаги, описанные выше, по-прежнему работают. (уголек: 1.12.6) - person Alan Francis; 07.08.2015
comment
как совместить этот подход с переопределениями начальной загрузки, такими как bootswatch.com/flatly - person Benjamin Udink ten Cate; 22.10.2015

Вот как я упаковываю файлы CSS поставщика с помощью Broccoli (который лежит в основе 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.

Затем в моем index.html я просто ссылаюсь на этот vendor.css файл:

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

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

person Johnny Hall    schedule 29.04.2014
comment
Я попробовал, но мне стало известно, что concat не определен в Broccoli (ReferenceError: concat не определен). Я добавил это, просто изменив путь к включенным таблицам стилей в файле: Brocfile.js в корне папки приложения. - person Guidouil; 30.04.2014
comment
Установите плагин npm install broccoli-concat --save Затем в вашем Brocfile вверху: var concat = require('broccoli-concat'); - person Johnny Hall; 30.04.2014

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

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

bower install --save bootstrap-sass

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

$brand-primary: 'purple';

@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
person Sam Selikoff    schedule 24.10.2015
comment
или $ ember install ember-cli-sass $ ember install ember-cli-bootstrap-sassy, ​​затем переименуйте app.css в app.scss и добавьте в него эту строку: @import bootstrap - person rmcsharry; 02.09.2016

bower install --save bootstrap

в вашем brocfile.js:

app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.css');
person Lydias303    schedule 11.04.2015
comment
Я не знаю, почему это на самом деле было снижено. Это может быть не очень понятно, если вы не знаете, куда поместить эти утверждения. Но он работает нормально ... возможно, не так хорошо, как надстройка, я признаю. они входят в ember-cli-build.js файл и отлично работают, если кому-то это нужно. Я кормлю свой ember изнутри как проект Asp.Net MVC, и мне нужно, чтобы он был доступен для этого проекта, а не только для приложения ember. - person hal9000; 07.01.2016

На терминале (для тех, кто использует диспетчер пакетов узлов)

npm install bootstrap --save

Использование ember-cli для импорта установленной начальной загрузки

Откройте ember-cli-build.js файл

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

Это будет сделано, если начальная загрузка установлена ​​через установщик NPM.

Не делайте этого:

app.import('./node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('./node_modules/bootstrap/dist/js/bootstrap.min.js');
person Lekens    schedule 16.08.2019