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に展開されているだけで含めてくれてなかった。