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


80

Я намагаюсь правильно встановити Twitter Bootstrap у своєму поточному проекті ember-cli. Я встановив bootstrap з bower:

bower install --save bootstrap

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

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

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

Але це не спрацювало. Файли видно істинним сервером розробників: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 });
};

Чи можете ви показати свою версію ember-cli та вміст Brocfile.js?
Marcio Junior

Також включаючи через index.html після копіювання в / стилі працювали. <link rel = "stylesheet" href = "assets / bootstrap.css"> <link rel = "stylesheet" href = "assets / bootstrap-theme.css">
Guidouil

Відповіді:


39

Можливо, ви захочете перевірити ember-bootstrap , який автоматично імпортує активи bootstrap.

ember install ember-bootstrap

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


1
Цієї команди достатньо для перетворення будь-якого існуючого проекту ember на bootstrap. Дякую Саймоне.
Раджа Нагендра Кумар

ember-bootstrap - це ВІДМІННО! Однак відсутнім компонентом цього є карусель. Якщо вам потрібна карусель для роботи, вам потрібно буде встановити компоненти завантажувального завантаження за допомогою інструкцій @rastapasta - виявляється, що ember-bootstrap не включає transitions.js як частину активів завантажувальної стрічки, і це ОБОВ’ЯЗКОВО для каруселі.
RyanNerd

@RyanNerd Дякую! Так, карусель все ще відсутня. Але слід додати, сподіваємось, незабаром після виходу 1.0!
Саймон Іхміг

68

БАШ:

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

У відповідь на запитання @ Joe щодо шрифтів та інших активів я не зміг отримати рекомендований метод 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]);

9
І перезапустіть сервер, оскільки зміни в brocfile не будуть автоматично зафіксовані Livereload ... Думаю :)
максимум

7
Якщо ви використовуєте ember-cli v0.0.35 або новішу версію, можливо, вам доведеться включити пару плагінів Broccoli до вашого package.json. Ви можете додати їх за допомогою: npm install --save-dev broccoli-merge-treesі npm install --save-dev broccoli-static-compiler.
Шон О'Хара,

5
Зверніть увагу, що тепер для будь-чого, встановленого з bower, слово "постачальник" замінено на "bower_components". Папку "постачальник" все ще можна використовувати для бібліотек, що визначаються користувачем.
SeanK

6
Ви також можете імпортувати шрифти за допомогою app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });Перевірте таке посилання miguelcamba.com/blog/2014/08/10/…
Jose S

3
Здається, мій згенерований проект також просив boostrap.css.map, тому я також додав рядок коду нижче. app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' });
premisRatio

45

БАШ:

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

Це хороший метод для ember 1.9, доки ember-cli-bootstrap не буде накинуто на збірку для керма> = 2.0
genkilabs

2
До цього слід додати команди, які Шон О'Хара заявив у коментарі до відповіді Дрю:npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler
Тимо

@TimoLehto яку перевагу надає cli над цим імпортом броку?
SuperUberDuper

@SuperUberDuper, вибачте. Я не розумію питання. Який кліп? Про що ти говориш?
Тимо

@genkilabs не бачить сенсу cli-bootstrap, це просто, як показано вище
SuperUberDuper

23

Оновлення 30.03.15

плюс зміна ça ... Я використовую ember-cli-bootstrap-sassy зараз, схоже, це приносить мінімальну кількість рухів, одночасно дозволяючи мені налаштовувати змінні Bootstrap.


Оновлення 22.01.15

Ймовірно, вам слід скористатися розчином Джонні вище замість бібліотеки, про яку я згадував спочатку. Мені також подобається 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-ember . Таким чином, ця бібліотека може вийти з синхронізації з офіційною версією завантаження. Однак я все ще вважаю це чудовим способом швидко зробити прототипи на новому проекті!


2
Змініть поточну на поточну версію. На сьогоднішній день (0.0.39), можливо, навіть не та версія, яку ви використовуєте ...
Jacob van Lingen

Наразі ember-cli-bootstrap не включає bootstrap.js, тому ви хочете мати можливість використовувати вбудовані методи javascript або різні плагіни.
намалював covi

2
Я не впевнений, що це повинен бути "рекомендований" спосіб встановити його як такий. Проект 'ember-cli-bootstrap' спирається на проект 'bootstrap-for-ember'. На жаль, за словами підтримуючого останнього проекту, він оголосив, що зараз працює над проектом «вугільні компоненти» як його наступник. Отже, якщо не будуть зроблені зусилля, щоб продовжити, де він зупинився (цей проект наразі використовує bootstrap 3.0.0, я вважаю), версія Bootstrap досить швидко застаріє (вже є).
poweratom

15
$> 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


1
Остання версія ember-cli більше не включає brocfile.js
Mad Scientist

5
@MadScientist, для імпорту можна використовувати 'ember-cli-build.js', кроки вище все ще працюють. (жар: 1.12.6)
Алан Френсіс

як ви поєднуєте цей підхід із перевизначенням завантажувального ремінгу,
Бенджамін Удінк десять Кейт

5

Ось як я пакую файли 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.

Потім у своєму index.html я просто посилаюся на цей vendor.cssфайл:

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

Ура.


Я спробував, але мені підказує, що concat не визначений у Broccoli (ReferenceError: concat не визначено). Я додав, що просто змінивши шлях до включених таблиць стилів у файлі: Brocfile.js в корені папки програми.
Guidouil

1
npm install broccoli-concat --saveПотім встановіть плагін у своєму Brocfile, вгорі:var concat = require('broccoli-concat');
Джонні Холл,

5

Якщо ви використовуєте 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';

або $ ember встановіть ember-cli-sass $ ember встановіть ember-cli-bootstrap-sassy, ​​потім перейменуйте app.css в app.scss і додайте до нього цей рядок: @import "bootstrap"
rmcsharry

3
bower install --save bootstrap

у вашому brocfile.js:

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

Не знаю, чому це насправді було позначено. Це може бути не зовсім зрозуміло, якщо ви не знаєте, куди подіти ці заяви. Але це чудово працює ... можливо, не так приємно, як надбудова, яку я визнаю. вони заходять у ember-cli-build.jsфайл і чудово працюють, якщо комусь це потрібно. Я годую свою вуглинку зсередини як проект Asp.Net MVC, і вона потрібна для цього проекту, а не лише для програми ember.
hal9000

0

На терміналі (для тих, хто використовує Node Package Manager)

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');
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.