在Ember.JS ember-cli应用程序中包含引导程序库的推荐方法


80

我正在尝试在当前的ember-cli项目中正确安装Twitter Bootstrap。我确实用bower安装了bootstrap:

bower install --save bootstrap

现在该库位于/ vendor / bootstrap / dist /(css | js | fonts)中, 我尝试过这里提到的内容:http : //ember-cli.com/#managing-dependencies 替换路径和CSS文件名,但我得到了关于Brocfile.js文件的错误。与示例相比,我认为brocfile格式已更改太多。

在/ app / styles /目录中移动样式表之后,我还尝试使用/app/styles/app.css文件使用@import :

@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

复制/ styles后还包括通过index.html进行工作。<link rel =“ stylesheet” href =“ assets / bootstrap.css”> <link rel =“ stylesheet” href =“ assets / bootstrap-theme.css”>
Guidouil 2014年

Answers:


39

您可能要签出ember-bootstrap,它将自动导入引导资产。

ember install ember-bootstrap

此外,它向您的应用程序添加了一组本机余烬组件,这使得在余烬中使用引导功能变得更加容易。看看它,尽管我有点偏见,因为我是它的作者!;)


1
此命令足以将任何现有的余烬项目转换为引导程序。谢谢西蒙。
Raja Nagendra Kumar

ember-bootstrap非常好!但是,圆盘传送带是缺少的组件。如果您需要轮播工作,则需要通过@rastapasta说明安装引导程序组件-看来ember-bootstrap并未将transitions.js作为其带来的引导程序资产的一部分包括在内,这是轮播需要。
RyanNerd '16

@RyanNerd谢谢!是的,轮播仍然不见了。但是应该在即将发布的1.0版本之后不久添加!
Simon Ihmig '16

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,从5月14日起,CSS也默认添加。

供参考: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
并重新启动服务器,因为Livereload不会自动获取对brocfile的更改...我认为:)
最高

7
如果您使用的是ember-cli v0.0.35或更高版本,则可能需要在package.json中包含几个Broccoli插件。您可以通过npm install --save-dev broccoli-merge-trees和添加它们npm install --save-dev broccoli-static-compiler
肖恩·奥哈拉

5
请注意,对于安装了Bower的所有产品,现在将“ vendor”替换为“ bower_components”。“ vendor”文件夹仍可用于用户指定的库。
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' });
consideRatio

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
肖恩·奥哈拉(Sean O'Hara)在对德鲁(Drew)的回答的评论中所述的命令应添加到此:npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler
Timo 2014年

@TimoLehto cli在此broc导入方面具有什么优势?
SuperUberDuper 2015年

@SuperUberDuper,对不起。我不明白这问题。什么cli?你在说什么?
Timo

@genkilabs看不到cli-bootstrap的要点,如上所示,它很容易
SuperUberDuper 2015年

23

更新3/30/15

加上更改...我现在使用ember-cli-bootstrap-sassy,它似乎带来了最小的麻烦,同时仍然让我自定义了Bootstrap的变量。


更新1/22/15

您可能应该使用上面的Johnny解决方案,而不是我最初提到的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。因此,该库可能与官方引导程序版本不同步。但是,我仍然发现它是快速进行新项目原型制作的好方法!


2
将当前版本更改为当前版本。当前的最新版本(0.0.39)可能甚至不是您使用的版本...
Jacob van Lingen

目前,ember-cli-bootstrap不包含bootstrap.js,因此您希望能够利用内置的javascript方法或各种插件。
在2014年

2
我不确定这是否应该是安装它的“推荐”方法。“ emmber-cli-bootstrap”项目依赖于“ bootstrap-for-ember”项目。不幸的是,据后一个项目的维护者说,他宣布他现在正在作为“ ember-components”项目的接班人。因此,除非有任何努力去弥补他离开的地方(我相信该项目当前正在使用bootstrap 3.0.0),否则Bootstrap版本将很快过时(已经)。
Poweratom

15
$> bower install --save bootstrap

随后添加以下两行到您的余烬-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');

瞧,准备出发了!

2015年8月18日更新:2015年8适用于Ember.js 1.13中引入的新方案


1
ember-cli的最新版本不再包含brocfile.js
Mad Scientist

5
@MadScientist,您可以使用“ ember-cli-build.js”进行导入,以上步骤仍然有效。(ember:1.12.6)
Alan Francis

您如何将这种方法与bootstrap替代项(如bootswatch.com/flatly)
本杰明·乌丁克

5

这就是我用Broccoli打包供应商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能够生存的地方。我假设您已经使用Bower安装了Bootstrap,这是Ember-cli方式。

然后在index.html中,我只是引用该vendor.css文件:

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

干杯。


我尝试了一下,但是它告诉我在broccoli中concat是未定义的(ReferenceError:未定义concat),我只是通过更改app文件夹根目录中文件Brocfile.js中包含的样式表的路径来添加它。
Guidouil

1
安装插件npm install broccoli-concat --save然后在您的Brocfile中的顶部:var concat = require('broccoli-concat');
Johnny Hall

5

如果您使用的是SASS(可能通过ember-cli-sass),bower_components则会自动添加到查找路径中。这意味着您可以只使用Bower并完全避免使用Brocfile / ember-cli-build文件。

使用Bower安装Bootstrap的官方SASS版本

bower install --save bootstrap-sass

然后将lib导入app.scss。这样做的好处是,您可以在导入引导程序之前自定义变量:

$brand-primary: 'purple';

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

或$ ember install ember-cli-sass $ ember install 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项目中获取余烬,并且需要该余量不仅适用于余烬应用程序,而且可用于该项目。
hal9000 '16

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');
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.