twitter-bootstrap 在 Ember.JS ember-cli App 中包含引导库的推荐方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23349959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Recommended way to include bootstrap library in Ember.JS ember-cli App
提问by Guidouil
I am trying to install properly Twitter Bootstrap in my current ember-cli project. I did install bootstrap with bower :
我正在尝试在我当前的 ember-cli 项目中正确安装 Twitter Bootstrap。我确实用 bower 安装了引导程序：
bower install --save bootstrap
Now the library is downloded in /vendor/bootstrap/dist/(css|js|fonts)I tried what is mentioned here : http://ember-cli.com/#managing-dependenciesreplacing path and css files names but I get errors regarding the Brocfile.jsfile. I think the brocfile format has changed too much compared to the example.
现在库被下载到/vendor/bootstrap/dist/(css|js|fonts)我尝试了这里提到的内容：http: //ember-cli.com/#managing-dependencies替换路径和 css 文件名，但我得到关于Brocfile.js文件的错误。我认为与示例相比，brocfile 格式变化太大。
I also tried to @import with the /app/styles/app.cssfile after moving the stylesheets in the /app/styles/ directory :
在 /app/styles/ 目录中移动样式表后，我还尝试使用/app/styles/app.css文件@import ：
@import url('/assets/bootstrap.css');
@import url('/assets/bootstrap-theme.css');
But it did not work. The files are visible true dev server : http://localhost:4200/assets/bootstrap.css
但它没有用。这些文件是可见的真正的开发服务器：http://localhost:4200/assets/bootstrap.css
Can someone throw me a bone here ?
有人可以把骨头扔给我吗？
Thx
谢谢
Edit :
编辑 ：
ember -v
ember-cli 0.0.23
brocfile.js
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 });
};
采纳答案by Simon Ihmig
You might want to check out ember-bootstrap, which will import the bootstrap assets automatically.
您可能想查看ember-bootstrap，它会自动导入引导程序资产。
ember install ember-bootstrap
Moreover it adds a suite of native ember components to your app, that make working with bootstrap features much easier in ember. Check it out, although I am a bit biased, as I am the author of it! ;)
此外，它还为您的应用程序添加了一套原生 ember 组件，这使得在 ember 中使用引导功能变得更加容易。看看吧，虽然我有点偏见，因为我是它的作者！;)
回答by drew covi
BASH:
巴什：
bower install --save bootstrap
Brocfile.js:
Brocfile.js：
app.import('vendor/bootstrap/dist/js/bootstrap.js');
app.import('vendor/bootstrap/dist/css/bootstrap.css');
The JS will be added to the app.js, which is linked by default, and the CSS will be added to assets/vendor.css, which as of May 14th, is also added by default.
JS 将添加到默认链接的 app.js 中，CSS 将添加到assets/vendor.css5 月 14 日也默认添加。
For reference: http://www.ember-cli.com/#managing-dependencies
供参考：http: //www.ember-cli.com/#managing-dependencies
In response to @Joe's question surrounding fonts and other assets, I was unable to get the recommended app.import() method to work on the fonts. I instead opted for the merge-trees and static-compiler approach:
在回答@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]);
回答by Patrick Seastar
BASH:
巴什：
bower install --save bootstrap
Brocfile.js:
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();
回答by Sam Selikoff
Update 3/30/15
15 年 3 月 30 日更新
plus ?a change... I use ember-cli-bootstrap-sassynow, it seems to bring along minimum cruft while still letting me customize Bootstrap's variables.
加上？一个变化......我现在使用ember-cli-bootstrap-sassy，它似乎带来了最小的 cruft，同时仍然让我自定义 Bootstrap 的变量。
Update 1/22/15
15 年 1 月 22 日更新
You should probably use Johnny's solution above instead of the lib I originally mentioned. I also like ember-cli-bootstrap-sass, because I can customize Bootstrap's variables directly in my project.
您可能应该使用上面 Johnny 的解决方案，而不是我最初提到的 lib。我也喜欢ember-cli-bootstrap-sass，因为我可以直接在我的项目中自定义 Bootstrap 的变量。
Original 7/11/14
原 7/11/14
If you're using a version of ember-cli that supports addons (0.35+, I believe), you can now use the ember-cli-bootstrappackage. From the root of your app,
如果您使用的是支持插件的 ember-cli 版本（我相信是 0.35+），您现在可以使用ember-cli-bootstrap包。从您的应用程序的根目录，
npm install --save-dev ember-cli-bootstrap
That's it!
而已！
Note: as @poweratom points out,
ember-cli-bootstrapis somebody else's library which chooses to also include bootstrap-for-ember. Thus, this lib could get out of sync with official bootstrap version. However, I still find it a great way to get prototyping fast on a new project!
注意：正如@poweratom 指出的那样，
ember-cli-bootstrap是其他人的库，它选择还包含bootstrap-for-ember。因此，此库可能与官方引导程序版本不同步。但是，我仍然发现这是在新项目中快速进行原型设计的好方法！
回答by rastapasta
$> bower install --save bootstrap
Afterwards add following two lines to your ember-cli-builds.js(or Brocfile.jsif you are using an older version of Ember.js):
然后将以下两行添加到您的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');
And voilà, ready to go!
瞧，准备好了！
updated 08/18/2015:adapted to new scheme introduced in Ember.js 1.13
2015 年 8月 18 日更新：适应 Ember.js 1.13 中引入的新方案
回答by Sam Selikoff
If you're using SASS (probably via ember-cli-sass), bower_componentsis automatically added to the lookup path. This means you can just use Bower and avoid the Brocfile/ember-cli-build file altogether.
如果您使用的是 SASS（可能通过ember-cli-sass），bower_components它会自动添加到查找路径中。这意味着您可以只使用 Bower 并完全避免使用 Brocfile/ember-cli-build 文件。
Install the official SASS version of Bootstrap with Bower
使用 Bower 安装 Bootstrap 的官方 SASS 版本
bower install --save bootstrap-sass
then import the lib in app.scss. The nice thing about this is you can customize the variables before importing bootstrap:
然后将 lib 导入app.scss. 这样做的好处是您可以在导入引导程序之前自定义变量：
$brand-primary: 'purple';
@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
回答by Johnny Hall
This is how I package vendor CSS files with Broccoli (which underpins Ember-cli).
这就是我用 Broccoli（它支持 Ember-cli）打包供应商 CSS 文件的方式。
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'
});
Where the vendorfolder is where my Bower packages live. And assetsis where I'm expecting my CSS to live. I'm assuming you've installed Bootstrap using Bower, which is the Ember-cli way.
当vendor文件夹是我的包鲍尔住的地方。这assets是我期待我的 CSS 存在的地方。我假设您已经使用 Bower 安装了 Bootstrap，这是 Ember-cli 的方式。
Then in my index.html, I'm simply referencing that vendor.cssfile:
然后在我的 index.html 中，我只是引用该vendor.css文件：
<link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">
Cheers.
干杯。
回答by Lydias303
bower install --save bootstrap
in your brocfile.js:
在您的brocfile.js：
app.import('bower_components/bootstrap/dist/js/bootstrap.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.css');
回答by Lekens
On the terminal (For those using Node Package Manager)
在终端上（对于那些使用节点包管理器的人）
npm install bootstrap --save
Using ember-cli, to import your installed bootstrap
使用 ember-cli，导入已安装的引导程序
Open the ember-cli-build.jsfile
打开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');
That will do it if bootstrap is installed via the NPM installer.
如果引导程序是通过 NPM 安装程序安装的，就会这样做。
Do not do this:
不要这样做：
app.import('./node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('./node_modules/bootstrap/dist/js/bootstrap.min.js');
