Zalecany sposób dołączenia biblioteki bootstrap do aplikacji Ember.JS ember-cli


80

Próbuję poprawnie zainstalować Twitter Bootstrap w moim obecnym projekcie ember-cli. Zainstalowałem bootstrap z altaną:

bower install --save bootstrap

Teraz biblioteka została pobrana w / vendor / bootstrap / dist / (css | js | fonts). Wypróbowałem to, o czym tutaj jest mowa: http://ember-cli.com/#managing-dependencies zastępując ścieżki i nazwy plików css, ale otrzymuję błędy dotyczące pliku Brocfile.js . Myślę, że format pliku Brocfile zmienił się zbytnio w porównaniu z przykładem.

Próbowałem także @ importować z plikiem /app/styles/app.css po przeniesieniu arkuszy stylów do katalogu / app / styles /:

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

Ale to nie zadziałało. Pliki są widoczne prawdziwy serwer deweloperski:http://localhost:4200/assets/bootstrap.css

Czy ktoś może mi tu rzucić kość?

Dzięki

Edytować :

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

Czy możesz pokazać swoją wersję ember-cli i zawartość Brocfile.js?
Marcio Junior

Włączanie również przez index.html po skopiowaniu w / styles. <link rel = "stylesheet" href = "asset / bootstrap.css"> <link rel = "stylesheet" href = "asset / bootstrap-theme.css">
Guidouil

Odpowiedzi:


39

Możesz sprawdzić ember-bootstrap , który automatycznie zaimportuje zasoby bootstrap.

ember install ember-bootstrap

Co więcej, dodaje do aplikacji zestaw natywnych komponentów ember, które znacznie ułatwiają pracę z funkcjami bootstrap w ember. Sprawdź, choć jestem trochę stronniczy, bo to ja jestem jego autorem! ;)


1
To polecenie wystarczy, aby przekształcić dowolny istniejący projekt Ember w bootstrap. Dziękuję Simon.
Raja Nagendra Kumar

ember-bootstrap jest DOSKONAŁY! Jednak brakującym elementem jest karuzela. Jeśli potrzebujesz karuzeli do działania, będziesz musiał zainstalować komponenty bootstrap za pomocą instrukcji @rastapasta - wydaje się, że ember-bootstrap nie zawiera transitions.js jako części zasobów bootstrap, które wprowadza, a to jest WYMAGANE dla karuzeli.
RyanNerd

@RyanNerd Thanks! Tak, wciąż brakuje karuzeli. Miejmy nadzieję, że powinno zostać dodane wkrótce po wydaniu 1.0!
Simon Ihmig,

68

GRZMOTNĄĆ:

bower install --save bootstrap

Brocfile.js:

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

JS zostanie dodany do pliku app.js, który jest domyślnie połączony, a także CSS, do assets/vendor.cssktórego od 14 maja jest również dodawany domyślnie.

Dla odniesienia: http://www.ember-cli.com/#managing-dependencies

W odpowiedzi na pytanie @ Joe dotyczące czcionek i innych zasobów, nie udało mi się uzyskać zalecanej metody app.import () do pracy z czcionkami. Zamiast tego wybrałem podejście merge-trees i static-compiler:

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
I zrestartuj serwer, ponieważ zmiany w pliku Brocfile nie zostaną automatycznie odebrane przez Livereload ... myślę, że :)
max

7
Jeśli używasz ember-cli v0.0.35 lub nowszej, może być konieczne dołączenie kilku wtyczek Broccoli do pliku package.json. Możesz je dodać poprzez: npm install --save-dev broccoli-merge-treesi npm install --save-dev broccoli-static-compiler.
Sean O'Hara

5
Zauważ, że teraz „sprzedawca” został zastąpiony przez „bower_components” dla wszystkiego, co zostało zainstalowane z bower. Folder „vendor” nadal może być używany dla bibliotek określonych przez użytkownika.
SeanK

6
Możesz także importować czcionki za pomocą opcji app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });Sprawdź poniższy link miguelcamba.com/blog/2014/08/10/…
Jose S

3
Wygląda na to, że mój wygenerowany projekt zażądał również boostrap.css.map, więc dodałem również poniższy wiersz kodu. app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' });
consideRatio

45

GRZMOTNĄĆ:

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

Jest to dobra metoda dla Ember 1.9, dopóki ember-cli-bootstrap nie zostanie uderzony, aby zbudować kierownicę> = 2.0
genkilabs

2
Polecenia, które Sean O'Hara wypowiedział w komentarzu do odpowiedzi Drew, należy dodać do tego:npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler
Timo

@TimoLehto jaką przewagę daje CLI w porównaniu z importem Broc?
SuperUberDuper

@SuperUberDuper, sry mate. Nie rozumiem pytania. Jakie Cli? O czym mówisz?
Timo

@genkilabs nie widzą sensu cli-bootstrap, jest to łatwe, jak pokazano powyżej
SuperUberDuper

23

Aktualizacja 30.03.15

plus ça change ... Używam teraz ember-cli-bootstrap-sassy , wydaje się, że przynosi minimum cruft, a jednocześnie pozwala mi dostosować zmienne Bootstrap.


Aktualizacja 22.01.15

Prawdopodobnie powinieneś użyć powyższego rozwiązania Johnny'ego zamiast biblioteki, o której pierwotnie wspomniałem. Lubię też ember-cli-bootstrap-sass , ponieważ mogę dostosować zmienne Bootstrap bezpośrednio w moim projekcie.

Oryginał 11.07.14

Jeśli używasz wersji ember-cli, która obsługuje dodatki (wydaje mi się, że 0.35+), możesz teraz użyć pakietu ember-cli-bootstrap . Z katalogu głównego Twojej aplikacji

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

Otóż ​​to!

Uwaga: jak wskazuje @poweratom, ember-cli-bootstrapjest to biblioteka innej osoby, która decyduje się również na dołączenie bootstrap-for-ember . W ten sposób ta biblioteka może stracić synchronizację z oficjalną wersją bootstrap. Jednak nadal uważam, że to świetny sposób na szybkie tworzenie prototypów w nowym projekcie!


2
Zmień bieżącą na aktualną wersję. Obecna dzisiejsza wersja (0.0.39) może nie jest nawet wersją, z której korzystasz ...
Jacob van Lingen

Obecnie ember-cli-bootstrap nie zawiera pliku bootstrap.js, więc chcesz mieć możliwość korzystania z wbudowanych metod javascript lub różnych wtyczek.
draw covi

2
Nie jestem pewien, czy powinien to być „zalecany” sposób instalacji. Projekt „ember-cli-bootstrap” opiera się na projekcie „bootstrap-for-ember”. Niestety, według opiekuna tego ostatniego projektu, ogłosił, że zamiast tego pracuje nad projektem „ember-components” jako jego następcą. Więc jeśli nie będą podejmowane wysiłki, aby wrócić do miejsca, w którym skończył (uważam, że ten projekt obecnie korzysta z bootstrap 3.0.0), wersja Bootstrap wkrótce stanie się nieaktualna (już jest).
poweratom

15
$> bower install --save bootstrap

Następnie dodaj następujące dwie linie do swojego pliku ember-cli-builds.js (lub Brocfile.js, jeśli używasz starszej wersji Ember.js):

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

I voilà, gotowe!

zaktualizowany 08/18/2015: dostosowany do nowego schematu wprowadzonego w Ember.js 1.13


1
Najnowsza wersja ember-cli nie zawiera już pliku brocfile.js
Mad Scientist

5
@MadScientist, możesz użyć pliku „ember-cli-build.js” do importowania, powyższe kroki nadal działają. (żar: 1.12.6)
Alan Francis

jak połączyć to podejście z nadpisywaniem bootstrap, jak na przykład bootswatch.com/flatly
Benjamin Udink ten Cate

5

W ten sposób pakuję pliki CSS dostawców za pomocą Broccoli (co stanowi podstawę 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'
  });

Gdzie vendorfolder jest miejscem, w którym mieszkają moje pakiety Bower. I assetstam spodziewam się, że mój CSS będzie żył. Zakładam, że zainstalowałeś Bootstrap za pomocą Bowera, co jest sposobem Ember-cli.

Następnie w moim index.html odwołuję się po prostu do tego vendor.csspliku:

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

Twoje zdrowie.


Wypróbowałem to, ale pokazuje mi, że concat jest niezdefiniowane w Broccoli (ReferenceError: concat nie jest zdefiniowane) Dodałem to po prostu zmieniając ścieżkę do dołączonych arkuszy stylów w pliku: Brocfile.js w katalogu głównym folderu aplikacji.
Guidouil

1
Zainstaluj wtyczkę npm install broccoli-concat --saveNastępnie w swoim pliku Brocfile u góry:var concat = require('broccoli-concat');
Johnny Hall

5

Jeśli używasz SASS (prawdopodobnie przez ember-cli-sass), bower_componentsjest automatycznie dodawany do ścieżki wyszukiwania. Oznacza to, że możesz po prostu użyć Bower i całkowicie uniknąć pliku Brocfile / ember-cli-build.

Zainstaluj oficjalną wersję Bootstrap SASS z Bower

bower install --save bootstrap-sass

następnie zaimportuj bibliotekę w formacie app.scss. Zaletą tego jest to, że możesz dostosować zmienne przed zaimportowaniem bootstrapa:

$brand-primary: 'purple';

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

lub $ ember install ember-cli-sass $ ember install ember-cli-bootstrap-sassy, ​​a następnie zmień nazwę app.css na app.scss i dodaj do niego następującą linię: @import "bootstrap"
rmcsharry

3
bower install --save bootstrap

w twoim brocfile.js:

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

Nie wiem, dlaczego to faktycznie zostało zaznaczone. Może nie być jasne, chyba że wiesz, gdzie umieścić te stwierdzenia. Ale działa dobrze ... może nie tak przyjemnie jak dodatek, przyznaję. idą do ember-cli-build.jspliku i działają dobrze, jeśli ktoś tego potrzebuje. Karmię mój ember z wewnątrz jako projekt Asp.Net MVC i potrzebowałem go dostępnego dla tego projektu, a nie tylko aplikacji ember.
hal9000

0

Na terminalu (dla osób korzystających z Node Package Manager)

npm install bootstrap --save

Użyj ember-cli, aby zaimportować zainstalowany bootstrap

Otwórz ember-cli-build.jsplik

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

To zrobi, jeśli bootstrap jest instalowany przez instalator NPM.

Nie rób tego:

app.import('./node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('./node_modules/bootstrap/dist/js/bootstrap.min.js');
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.