在Ember.JS ember-cli应用程序中包含引导库的推荐方法 [英] Recommended way to include bootstrap library in Ember.JS ember-cli App

问题描述

我正在尝试在我目前的ember-cli项目中正确安装Twitter Bootstrap。
我没有安装bootstrap与bower：

  bower install --save bootstrap 
  

现在，这个库在 / vendor / bootstrap / dist /（css | js | fonts）
我尝试了这里提到的内容： http://ember-cli.com/#managing-dependencies
替换路径和css文件名称，但是我收到关于 Brocfile.js 文件的错误。我认为与示例相比，brocfile格式发生了很大的变化。

我还尝试使用 /app/styles/app.css <在/ app / styles /目录中移动样式表之后，再使用em>文件：

  @import url（'/ assets / bootstrap。 CSS'）; 
 @import url（'/ assets / bootstrap-theme.css'）; 
  

但它没有工作。文件是可见的真开发服务器： http：// localhost：4200 / assets / bootstrap.css

可以有人给我一块骨头吗？

Thx

编辑：

  ember -v 
 ember-cli 0.0.23 
  

brocfile.js

  / *全局需求，模块* / 
 
 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：'/'，
文件：['index .html']，
 destDir：'/'
}）; 
 
 indexHTML = replace（indexHTML，{
文件：['index.html']，
模式：[{match：/ \ {\ {ENV\} \} / g，replace：getEnvJSON.bind（null，env）}] 
}）; 
 
 // sourceTrees，适用于CSS和JavaScript的appAndDependencies 
 
 var app = pickFiles（'app'，{
 srcDir：'/'，
 destDir ：前缀
}）; 
 
 app = preprocessTemplates（app）; 
 
 var config = pickFiles（'config'，{//不要选任何东西，只是看配置文件夹
 srcDir：'/'，
文件：[]，
 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：[
前缀+'/**/*.js'
]，
 legacyFilesToAppend：legacyFilesToAppend，
 wrapInEval：env！=='production'，
 outputFile：'/assets/app.js'
}）; 
 
 if（env ==='production'）{
 applicationJs = uglifyJavaScript（applicationJs，{
 mangle：false，
 compress：false 
} ）; 
} 
 
 //样式
 
 var styles = preprocessCss（appAndDependencies，prefix +'/ styles'，'/ assets'）; 
 
 // Bootstrap样式集成
 var bootstrap = pickFiles（'vendor'，{
 srcDir：'/ bootstrap / dist / css'，
文件：[
'bootstrap.css'，
'bootstrap-theme.css'
]，
 destDir：'/ assets /'
}）; 
 
 // var bootstrap = preprocessCss（appAndDependencies，'/ vendor / bootstrap / dist / css'，'/ assets'）; 
 
 // Ouput 
 
 var outputTrees = [
 indexHTML，
 applicationJs，
'public'，
 styles，
 bootstrap 
]; 
 
 //测试
 
 if（env！=='production'）{
 
 var tests = pickFiles（'tests'，{
 srcDir：'/'，
 destDir：prefix +'/ tests'
}）; 
 
 var testsIndexHTML = pickFiles（'tests'，{
 srcDir：'/'，
文件：['index.html']，
 destDir：'/测试'
}）; 
 
 var qunitStyles = pickFiles（'vendor'，{
 srcDir：'/ qunit / qunit'，
文件：['qunit.css']，
 destDir ：'/ assets /'
}）; 
 
 testsIndexHTML = replace（testsIndexHTML，{
文件：['tests / index.html']，
模式：[{match：/ \ {\ {ENV\\ \\} \} / g，替换：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，{
 // 
的临时解决方法// https://github.com/joliss/broccoli-es6-concatenator/issues/9 
 loaderFile：'_loader.js'，
 ignoredModules：[
'ember / resolver'，
'ember-qunit'
]，
 inputFiles：[ 
前缀+'/**/*.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-bootstrap ，它将自动导入引导资产。

  ember install ember-bootstrap 
  

此外，它还为您的应用程序添加了一组原生的ember组件，使得在启动功能方面更加简单。看看，虽然我有点偏见，因为我是它的作者！ ;）

I am trying to install properly Twitter Bootstrap in my current ember-cli project. I did install bootstrap with 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-dependencies replacing path and css files names but I get errors regarding the Brocfile.js file. I think the brocfile format has changed too much compared to the example.

I also tried to @import with the /app/styles/app.css file after moving the stylesheets in the /app/styles/ directory :

@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

Can someone throw me a bone here ?

Thx

Edit :

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

解决方案

You might want to check out ember-bootstrap, which will import the bootstrap assets automatically.

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.JS ember-cli应用程序中包含引导库的推荐方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！