phoenixのjsライブラリ追加方法(brunchを利用)

nodeモジュールを追加してページ側のjsで利用する時にbrunchの使い方で詰まったので忘れないために

※ver1.2系で行った方法なのでver1.3だとまた少し違うかも

基本

nodeのモジュールをnpmで手に入れてweb/static/js/app.jsにimportを行いmix phoenix.digest をした時に該当のモジュールが利用できる様になる。

import "phoenix_html" # 最初からある
import "モジュール名"

importで該当のモジュールが利用できるのか確認したい場合priv/static/js/app.jsの中身を見てやる。 このファイルにはmix phoenix.digest実行をした時に該当のjsファイルをapp.jsに展開してくれるので文字列を検索してヒットすれば扱えるようになる。

ただ、jqueryをこの様にして利用しようとした時にUncaught ReferenceError: $ is not defined が発生 調べた所jqueryはapp.jsのimportではなくbrunch-config.jsに設定をしてやる必要があるみたい。

デフォルトだとbrunch-config.jsの最後に

.
.
.
  npm: {
    enabled: true
  }
};

npmキーの項目があるのでここを

.
.
.
  npm: {
    enabled: true,
    globals: {
      jQuery: "jquery",
      $: "jquery"
    }
  }
};

この様に変更してやる必要がある。 やってる内容をざっくり説明するとjQueryというオブジェクトにjqueryの内容を参照させてそれを\$オブジェクトが参照するような意味になる。 $の記載がないと$(function(){})こういったよくあるjqueryの記法が使えないので注意。

jsをモジュールを追加する方法として2つ記載したが、このどちらも読み込むjsファイルに関してはモジュール名/package.jsonにあるmainキーのjsファイルが実際ロードされる。 これ以外のjsファイルを加えたい場合にはimportを利用する。

import "phoenix_html" # 最初からある
import "モジュール名"   # モジュールのロード
import "モジュール名/パス" # モジュールの一部をロード

この3つ目の記載の様にする。 import "モジュール名"node_modules/モジュール名まで見てくれるので以降のパスを記載すれば意図したjsファイルをロードしてくれる。

cssを追加してみる

基本でjsコードのみのモジュールの追加方法は終わりだが、jquery-uiの様にcssも追加する必要がある場合は追加の記載が必要になる。

jqueryと同じ様にbrunch-config.jsにstylesキーの項目を追加するとcssを読み込んでくれる。

.
.
.
  npm: {
    enabled: true,
    globals: {
      jQuery: "jquery",
      $: "jquery"
    },
    styles: {
      "jquery-ui-dist": ["jquery-ui.min.css"]
    }
  }
};

テストではjquery-ui-distを利用 npm install jquery-uiをした時はパスが変わるので注意

cssもjsと同様にmix phoenix.digestを行うと1つのファイルにまとめてくれる。 priv/static/css/app.js にまとめたファイルを出力してくれるのでちゃんと含まれているかを調べたい場合このファイルを見れば良さそう。

jsファイルと同様にcssにもweb/static/js/app.cssがありここに書いてもimportできそうだったが、importを書いてみたがビルド後のソースを見るとapp.cssに書いたままの内容がビルド後のcssに展開されているだけで含めてくれてなかった。