EmberJsでライブラリを使うまでの覚え書き

イシュー

  • ember-cli のドキュメントを読んでいるが、どうも理解していない
  • ember-cli は、emberJSをアウトプットとして出力するが、その出力するまでのビルドの仕組みを仕様として組み込んでいる
  • ビルドの仕組みは、Broccoli(node) であったり、Bower(node)であったり、Grunt(node)を使用している
  • emberのコントローラでjavascript libraryを使用するには、ビルドの仕組みに設定する必要がある
  • まずは、bower install --save XX で、bower.json にライブラリを追加する
  • そこから先が分からない
    • どうやったら「import Hammer from 'hammer';」みたいな感じでコントローラから使用できるようになるのか？

参考

Brocfile.js のコメント

  • ember-cli v.1.13 ではファイル名が、Brocfile.jsからember-cli-build.js に変わったがこのファイルを見てみる
  • hoge/ember-cli-build.js
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  return app.toTree();
};

生成された出力ファイルに追加のライブラリを追加するために app.importを使用します。

あなたは異なる環境で異なる資産を使用する必要がある場合は、最初のパラメータとしてオブジェクトを指定します。 そのオブジェクトのキーは、環境名であるべきであり、値は、その環境で使用するための資産であるべきです。

あなたが含めようとしているライブラリにAMDまたはES6モジュールが含まれており、アプリケーションにインポートしたければ、その値として、各モジュールのエクスポートと一緒にキーとしてモジュールのリストでオブジェクトを指定してください。

Predef

Using global variables or external scripts

If you want to use external libraries that write to a global namespace (e.g. moment.js), you need to add those to the predef section of your project’s .jshintrc file and set its value to true. If you use the lib in tests, you need to add it to your tests/.jshintrc file, too.

グローバル変数または外部スクリプトの使用について

もしあなたがグローバル名前空間（例えばmoment.js）を書いて外部ライブラリを使用する場合は、プロジェクトの.jshintrcファイルのpredefセクションにそれらを追加し、その値をtrueに設定する必要があります。 あなたはテスト内のlibを使用する場合は、あなたも、tests/.jshintrcファイルに追加する必要があります。

globalでアクセス

  • ember-cli-build.js に、 app.import を記述することによってcontrollerからアクセス可能
  • hoge/ember-cli-build.js
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });
  app.import('bower_components/hammerjs/hammer.js');
  app.import('bower_components/jquery.hammer.js/jquery.hammer.js');

  return app.toTree();
};
  • hoge/app/controllers/index.js
import Ember from 'ember';

export default Ember.Controller.extend({

  actions: {
    testAction: function() {
      var elem = document.getElementById('fuga');
      var mc = new Hammer(elem);
      
      mc.on("panleft panright tap press", function(ev) {
        elem.textContent = ev.type +" gesture detected.";
      });
      
    }
  }

});

Ember Controller init Method

参考