Cách đề xuất để bao gồm thư viện bootstrap trong Ứng dụng ember-cli Ember.JS


80

Tôi đang cố gắng cài đặt đúng Twitter Bootstrap trong dự án ember-cli hiện tại của mình. Tôi đã cài đặt bootstrap với bower:

bower install --save bootstrap

Bây giờ thư viện đã được mã hóa trong / nhà cung cấp / bootstrap / dist / (css | js | font) Tôi đã thử những gì được đề cập ở đây: http://ember-cli.com/#managing-dependencies thay thế tên tệp đường dẫn và css nhưng tôi nhận được lỗi liên quan đến tệp Brocfile.js . Tôi nghĩ rằng định dạng brocfile đã thay đổi quá nhiều so với ví dụ.

Tôi cũng đã cố gắng @import với tệp /app/styles/app.css sau khi di chuyển các bảng định kiểu trong thư mục / app / styles /:

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

Nhưng nó đã không hoạt động. Các tệp có thể nhìn thấy máy chủ nhà phát triển đích thực:http://localhost:4200/assets/bootstrap.css

Ai đó có thể ném cho tôi một khúc xương ở đây?

Cám ơn

Biên tập :

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

Bạn có thể hiển thị phiên bản ember-cli và nội dung Brocfile.js của mình không?
Marcio Junior

Cũng bao gồm thông qua index.html sau khi sao chép trong / styles hoạt động. <link rel = "stylesheet" href = "asset / bootstrap.css"> <link rel = "stylesheet" href = "
asset

Câu trả lời:


39

Bạn có thể muốn xem ember-bootstrap , nó sẽ tự động nhập nội dung bootstrap.

ember install ember-bootstrap

Hơn nữa, nó bổ sung một bộ các thành phần ember gốc vào ứng dụng của bạn, giúp làm việc với các tính năng bootstrap trong ember dễ dàng hơn nhiều. Hãy kiểm tra nó, mặc dù tôi có một chút thành kiến, vì tôi là tác giả của nó! ;)


1
Lệnh này đủ để chuyển đổi bất kỳ dự án ember nào hiện có thành bootstrap. Cảm ơn Simon.
Raja Nagendra Kumar

ember-bootstrap là TUYỆT VỜI! Tuy nhiên, một thành phần còn thiếu trong đó là băng chuyền. Nếu bạn cần băng chuyền hoạt động thì bạn sẽ cần cài đặt các thành phần bootstrap thông qua hướng dẫn @rastapasta - có vẻ như ember-bootstrap không bao gồm các transitions.js như một phần của tài sản bootstrap mà nó mang lại và đây là BẮT BUỘC đối với băng chuyền.
RyanNerd 19/12/16

@RyanNerd Cảm ơn! Có, băng chuyền vẫn bị thiếu. Nhưng hy vọng sẽ được thêm vào một thời gian sau khi bản 1.0 sắp tới!
Simon Ihmig

68

TIỀN:

bower install --save bootstrap

Brocfile.js:

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

JS sẽ được thêm vào app.js, được liên kết theo mặc định và CSS sẽ được thêm vào assets/vendor.css, kể từ ngày 14 tháng 5, cũng được thêm theo mặc định.

Để tham khảo: http://www.ember-cli.com/#managing-dependencies

Để trả lời câu hỏi của @ Joe về phông chữ và các nội dung khác, tôi không thể có được phương thức app.import () được đề xuất hoạt động trên các phông chữ. Thay vào đó, tôi đã chọn phương pháp hợp nhất cây và trình biên dịch tĩnh:

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
Và khởi động lại máy chủ vì các thay đổi đối với tệp brocfile sẽ không được Livereload tự động chọn ... Tôi nghĩ :)
tối đa

7
Nếu bạn đang sử dụng ember-cli v0.0.35 hoặc mới hơn, bạn có thể cần phải bao gồm một vài plugin Broccoli trong package.json của mình. Bạn có thể thêm chúng qua: npm install --save-dev broccoli-merge-treesnpm install --save-dev broccoli-static-compiler.
Sean O'Hara

5
Lưu ý rằng bây giờ 'nhà cung cấp' đã được thay thế bằng 'bower_components' cho bất kỳ thứ gì được cài đặt bằng bower. Thư mục 'nhà cung cấp' vẫn có thể được sử dụng cho các thư viện do người dùng chỉ định.
SeanK

6
Bạn cũng có thể nhập phông chữ bằng app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });Kiểm tra liên kết sau miguelcamba.com/blog/2014/08/10/…
Jose S

3
Có vẻ như dự án được tạo của tôi cũng yêu cầu boostrap.css.map, vì vậy tôi cũng đã thêm dòng mã bên dưới. app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' });
coiRatio

45

TIỀN:

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

Đây là một phương pháp tốt cho ember 1,9 đến ember-cli-bootstrap được đụng đến xây dựng cho tay lái> = 2.0
genkilabs

2
Các lệnh mà Sean O'Hara đã nêu trong một nhận xét về câu trả lời của Drew nên được thêm vào điều này:npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler
Timo

@TimoLehto cli mang lại lợi ích gì cho việc nhập trâm này?
SuperUberDuper

@SuperUberDuper, bạn hiền. Tôi không hiểu câu hỏi. Cli gì? Bạn đang nói về cái gì
Timo

@genkilabs không nhìn thấy điểm của cli-bootstrap, dễ dàng của nó như trình bày ở trên
SuperUberDuper

23

Cập nhật 30/3/15

cộng với thay đổi ça ... Tôi sử dụng ember-cli-bootstrap-sassy bây giờ, nó có vẻ như mang lại sự phức tạp tối thiểu trong khi vẫn cho phép tôi tùy chỉnh các biến của Bootstrap.


Cập nhật 1/22/15

Bạn có lẽ nên sử dụng giải pháp của Johnny ở trên thay vì lib mà tôi đã đề cập ban đầu. Tôi cũng thích ember-cli-bootstrap-sass , vì tôi có thể tùy chỉnh các biến của Bootstrap trực tiếp trong dự án của mình.

Ban đầu 7/11/14

Nếu bạn đang sử dụng phiên bản ember-cli hỗ trợ addon (tôi tin là 0.35+), thì bây giờ bạn có thể sử dụng gói ember-cli-bootstrap . Từ gốc ứng dụng của bạn,

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

Đó là nó!

Lưu ý: như @poweratom đã chỉ ra, ember-cli-bootstraplà thư viện của người khác chọn bao gồm bootstrap-for-ember . Do đó, lib này có thể không đồng bộ với phiên bản bootstrap chính thức. Tuy nhiên, tôi vẫn thấy đó là một cách tuyệt vời để tạo mẫu nhanh cho một dự án mới!


2
Thay đổi hiện tại thành phiên bản hiện tại của bạn. Hiện ngày hôm nay (0.0.39) có lẽ không phải ngay cả những phiên bản bạn đang sử dụng ...
Jacob van Lingen

Hiện tại ember-cli-bootstrap không bao gồm bootstrap.js, vì vậy bạn muốn có thể sử dụng các phương thức javascript tích hợp sẵn hoặc các plugin khác nhau.
đã vẽ covi

2
Tôi không chắc liệu đây có phải là cách "được khuyến nghị" để cài đặt hay không. Dự án 'ember-cli-bootstrap' dựa trên dự án 'bootstrap-for-ember'. Thật không may, theo người duy trì dự án sau này, anh ấy đã thông báo rằng hiện tại anh ấy đang làm việc trên dự án 'ember-components' với tư cách là người kế nhiệm của nó. Vì vậy, trừ khi có những nỗ lực để tiếp tục nơi anh ấy đã dừng lại (tôi tin rằng dự án đó hiện đang sử dụng bootstrap 3.0.0), phiên bản Bootstrap sẽ sớm cũ (đã là như vậy).
poweratom

15
$> bower install --save bootstrap

Sau đó, thêm hai dòng sau vào ember-cli-build.js của bạn (hoặc Brocfile.js nếu bạn đang sử dụng phiên bản cũ hơn của Ember.js):

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

Và voilà, đã sẵn sàng để đi!

cập nhật 18/08/2015: điều chỉnh theo sơ đồ mới được giới thiệu trong Ember.js 1.13


1
Phiên bản mới nhất của ember-cli không bao gồm brocfile.js nữa
Mad Scientist

5
@MadScientist, bạn có thể sử dụng 'ember-cli-build.js' để nhập, các bước trên vẫn hoạt động. (ember: 1.12.6)
Alan Francis

làm thế nào để bạn kết hợp phương pháp này với ghi đè bootstrap thích bootswatch.com/flatly
Benjamin Udink Ten Cate

5

Đây là cách tôi đóng gói các tệp CSS của nhà cung cấp với Broccoli (làm nền tảng cho 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'
  });

Nơi vendorthư mục là nơi chứa các gói Bower của tôi. Và assetslà nơi tôi mong đợi CSS của mình tồn tại. Tôi giả sử bạn đã cài đặt Bootstrap bằng Bower, đó là cách Ember-cli.

Sau đó, trong index.html của tôi, tôi chỉ đơn giản là tham chiếu đến vendor.csstệp đó :

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

Chúc mừng.


Tôi đã thử nó nhưng nó cho tôi biết rằng concat không được xác định trong Broccoli (ReferenceError: concat không được xác định) Tôi đã thêm rằng chỉ cần thay đổi đường dẫn đến các bảng định kiểu được bao gồm trong tệp: Brocfile.js ở thư mục gốc của thư mục ứng dụng.
Guidouil

1
Cài đặt plugin npm install broccoli-concat --saveSau đó trong Brocfile của bạn, ở trên cùng:var concat = require('broccoli-concat');
Johnny Hall

5

Nếu bạn đang sử dụng SASS (có thể là qua ember-cli-sass), bower_componentssẽ tự động được thêm vào đường dẫn tra cứu. Điều này có nghĩa là bạn chỉ có thể sử dụng Bower và tránh hoàn toàn tệp Brocfile / ember-cli-build.

Cài đặt phiên bản SASS chính thức của Bootstrap với Bower

bower install --save bootstrap-sass

sau đó nhập lib vào app.scss. Điều thú vị về điều này là bạn có thể tùy chỉnh các biến trước khi nhập bootstrap:

$brand-primary: 'purple';

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

hoặc $ ember cài đặt ember-cli-sass $ ember cài đặt ember-cli-bootstrap-hỗn xược app.css sau đó đổi tên để app.scss và thêm dòng này vào nó: @import "bootstrap"
rmcsharry

3
bower install --save bootstrap

trong brocfile.js:

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

Tôi không biết tại sao điều này thực sự được đánh dấu xuống. Nó có thể không rõ ràng lắm trừ khi bạn biết nơi đặt những câu lệnh này. Nhưng nó hoạt động tốt ... có lẽ không tốt như tiện ích bổ sung mà tôi thừa nhận. chúng đi vào ember-cli-build.jshồ sơ và hoạt động tốt nếu có ai cần điều này. Tôi đang nuôi ember của mình từ bên trong dưới dạng dự án Asp.Net MVC và cần nó có sẵn cho dự án đó chứ không chỉ ứng dụng ember.
hal9000

0

Trên thiết bị đầu cuối (Đối với những người sử dụng Trình quản lý gói Node)

npm install bootstrap --save

Sử dụng ember-cli, để nhập bootstrap đã cài đặt của bạn

Mở ember-cli-build.jstệp

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

Điều đó sẽ thực hiện được nếu bootstrap được cài đặt thông qua trình cài đặt NPM.

Đừng làm điều này:

app.import('./node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('./node_modules/bootstrap/dist/js/bootstrap.min.js');
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.