Ember.JSember-cliアプリにブートストラップライブラリを含めるための推奨される方法


80

現在のember-cliプロジェクトにTwitterBootstrapを正しくインストールしようとしています。私はbowerでブートストラップをインストールしました:

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

誰かが私に骨をここに投げることができますか?

THX

編集:

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コンテンツを表示できますか?
マルシオジュニア

/ stylesにコピーした後、index.html経由で含めることもできました。<link rel = "stylesheet" href = "assets / bootstrap.css"> <link rel = "stylesheet" href = "assets / bootstrap-theme.css">
Guidouil 2014

回答:


39

ブートストラップアセットを自動的にインポートするember-bootstrapをチェックアウトすることをお勧めします。

ember install ember-bootstrap

さらに、アプリに一連のネイティブemberコンポーネントを追加し、emberでのブートストラップ機能の操作をはるかに簡単にします。私はそれの作者なので、私は少し偏見がありますが、それをチェックしてください!;)


1
このコマンドは、既存のemberプロジェクトをブートストラップに変換するのに十分です。サイモンありがとう。
Raja Nagendra Kumar 2016

ember-bootstrapは素晴らしいです!ただし、これから欠落しているコンポーネントはカルーセルです。カルーセルを機能させる必要がある場合は、@ rastapasta命令を介してブートストラップコンポーネントをインストールする必要があります-ember-bootstrapには、それがもたらすブートストラップアセットの一部としてtransitions.jsが含まれていないようです。これはカルーセルに必要です。
RyanNerd 2016

@RyanNerdありがとう!はい、カルーセルはまだありません。しかし、うまくいけば、次の1.0リリースの直後に追加する必要があります!
Simon Ihmig 2016

68

BASH:

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日以降、これもデフォルトで追加されます。

参考: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
そして、brocfileへの変更はLivereloadによって自動的に取得されないため、サーバーを再起動します...私は思います:)
最大

7
ember-cli v0.0.35以降を使用している場合は、package.jsonにいくつかのブロッコリープラグインを含める必要がある場合があります。npm install --save-dev broccoli-merge-treesとを介してそれらを追加できますnpm install --save-dev broccoli-static-compiler
ショーンオハラ2014年

5
現在、bowerがインストールされているものはすべて、「vendor」が「bower_components」に置き換えられていることに注意してください。'vendor'フォルダーは、ユーザー指定のライブラリーに引き続き使用できます。
SeanK 2014

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 2014

45

BASH:

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-cli-bootstrapがバンプされてハンドルバーが2.0以上になるまで、ember 1.9に適した方法です
genkilabs 2014

2
:ショーン・オハラはドリューの答えにコメントで述べたことをコマンドがこれに追加されなければならないnpm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler
ティモ

@TimoLehto cliはこのbrocインポートに対してどのような利点がありますか?
SuperUberDuper 2015年

@ SuperUberDuper、srymate。質問が理解できません。何のCLI?あなたは何について話していますか?
ティモ

@genkilabsは、cli-bootstrapのポイントを
認識していません。

23

2015年3月30日更新

plusçachange...今はember-cli-bootstrap-sassyを使用していますが、Bootstrapの変数をカスタマイズできるようにしながら、最小限の手間がかかるようです。


2015年1月22日更新

私が最初に述べたlibの代わりに、おそらく上記のJohnnyのソリューションを使用する必要があります。プロジェクトでBootstrapの変数を直接カスタマイズできるので、ember-cli-bootstrap-sassも気に入っています。

オリジナル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
currentを現在のバージョンに変更します。現在(0.0.39)は、使用しているバージョンでもない可能性があります...
Jacob van Lingen

今のところ、ember-cli-bootstrapにはbootstrap.jsが含まれていないため、組み込みのjavascriptメソッドまたはさまざまなプラグインを利用できるようにする必要があります。
コビを描いた2014

2
これがそれ自体をインストールするための「推奨される」方法であるかどうかはわかりません。'ember-cli-bootstrap'プロジェクトは、 'bootstrap-for-ember'プロジェクトに依存しています。残念ながら、後者のプロジェクトのメンテナによると、彼は現在、代わりに「ember-components」プロジェクトに取り組んでいると発表しました。したがって、彼が中断したところから再開する努力がない限り(そのプロジェクトは現在、ブートストラップ3.0.0を使用していると思います)、ブートストラップバージョンはすぐに古くなります(すでにそうです)。
poweratom 2014年

15
$> bower install --save bootstrap

その後、次の2行をember-cli-builds.js(または古いバージョンのEmber.jsを使用している場合はBrocfile.js)に追加します。

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

そして、ボイラ、行く準備ができました!

2015年8月18日更新: Ember.js1.13で導入された新しいスキームに適合


1
ember-cliの最新バージョンにはbrocfile.jsが含まれていません
マッドサイエンティスト

5
@MadScientist、インポートには「ember-cli-build.js」を使用できますが、上記の手順は引き続き機能します。(ember:1.12.6)
Alan Francis


5

これは、ベンダーの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私のバウアーパッケージが住んでいる場所フォルダです。そしてassets、CSSが存在することを期待している場所です。Ember-cliの方法であるBowerを使用してBootstrapをインストールしたと仮定します。

次に、index.htmlで、そのvendor.cssファイルを参照しているだけです。

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

乾杯。


私はそれを試しましたが、ブロッコリーでconcatが定義されていないことを教えてくれます(ReferenceError:concatが定義されていません)ファイルに含まれるスタイルシートへのパスを変更するだけで追加しました:アプリフォルダーのルートにあるBrocfile.js。
Guidouil 2014

1
プラグインをインストールしてnpm install broccoli-concat --save上部で、あなたのBrocfileでその後:var concat = require('broccoli-concat');
ジョニー・ホール

5

SASSを使用している場合(おそらく経由ember-cli-sass)、bower_componentsはルックアップパスに自動的に追加されます。つまり、Bowerを使用するだけで、Brocfile / ember-cli-buildファイルを完全に回避できます。

Bowerを使用してBootstrapの公式SASSバージョンをインストールします

bower install --save bootstrap-sass

次に、ライブラリをにインポートし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

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.NetMVCプロジェクトとして内部から供給しており、残り火アプリだけでなくそのプロジェクトでも利用できるようにする必要がありました。
hal9000 2016年

0

ターミナル上(ノードパッケージマネージャーを使用している場合)

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');
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.