Railsで使えるGem

Rails5.1でnpmライブラリを使おう〜webpacker

投稿日:2018年3月26日 更新日:

webpacker

webpackerはrailsからwebpackを操作するラッパー.
webpackが使えることで、Javascriptのライブラリがgemで登録されてなくても、npm modulesが使えて世界が広がる.

インストール

まずはGemfileに加える.

または、rails newの際にオプション指定もOK.

次に、railsコマンドでインストールする.

コマンドライン

bin以下にwebpackとwebpack-dev-serverができる.
bin/webpackはwebpackするコマンド、webpack-dev-serverは監視して変更があったらwebpackしてくれるサーバー.

hello webpacker

app/javascript/packs/application.jsが新たにできている.

これをヘッダーで読み込んで、

リロードすれば、application.jsが読み込まれてる.

yarn

yarnはnode.jsの高速なパッケージマネージャ.
package.jsonでパッケージを管理してくれる.

必要なモジュールをaddしていけばよい.

これで自動的にpackage.jsonに書き込まれる.

これでapplication.jsで読み込めば、jQueryが使える.
jQueryでは、$とjQueryはglobalに登録しておく必要がある.

requireでなくimportを使うのがはやりみたい.

CoffeeScript

ついでに、CoffeeScriptも使いたい.

これでdev-serverを再起動すれば、coffee拡張子のファイルもコンパイルしてくれる.
今のところ1系なので、2系をつかうには別途設定が必要.

CoffeeScript2

package.jsonを変更

config/webpack/environment.jsを変更

ecoテンプレート

あまりニーズはないと思われるけどBackbone.jsでecoテンプレートをJSTで使う方法.
まず、JSTを使うには、こちらのレポジトリを使う.

そして、config/webpack/loaders/eco.jsを作成

で、config/webpack/environment.jsを編集
environment.jsのloadersの設定を確認するのには、コメントをはずす.

webpack-dev-serverを起動していたら再起動.

これで、Backbone.Viewなどで、JSTを使うことができる.
ファイル名は、~.jst.ecoにする.ecoファイルはtemplatesという名前のディレクトリ以下に入れる.

例: app/javascript/packs/templates/hello.jst.eco

webpackerでディレクトリ上のファイルをまとめてrequireする

require_tree的なことをする.

参照先の変数名contextは予約語ぽいエラーが出るので、変数名だけ変えれば動く.

webpackerは、packs以下のサブフォルダも含めたファイルについて、jsファイルを作成する仕様らしい.
そこで、複数ファイルで1つのファイルを作りたい場合は、packsより上にファイルを作る.
そのとき、packs以下のエントリー名とそのjs用のディレクトリ名を同じにしといたらええんちゃうということらしい.

例:

読み込む順番も意識したrequire.
なお、require.contextの引数は、変数を取ることができない.

参考にしたリンク

SCSSファイル

まず、scssファイルを作成.
app/javascript/src/application.scss

次に、jsファイルのほうでimportする.

最後に、ヘルパータグで読み込む.

リンク先を見ると、packs以下にscssを置いてもコンパイルされるみたい.その場合、jsファイルでimportする必要ない.
ただし、この場合、jsファイルもあわせて、ユニークな命名の必要があるみたい.
つまり、application.scssとapplication.coffeeは同時に使えない.この場合、設定によるけど、scssだけコンパイルされて、coffeeは無視される.

ふつう、cssとjsは分離して扱いたいから、こっちの方がすっきり管理できるかも.

Bootstrap4

yarnでインストール.jQueryとjquery-ujsも必要に応じて.

まず、scssファイルで

次に、Javascriptで

その他情報

hivemind

go製のProcfileベースのプロセス管理ツール

-Railsで使えるGem
-, , ,

執筆者:

関連記事

no image

Rails3.2+MongoDBでつくったアプリをheroku+mongoHQにアップしたよ

Stack Overflowはなんでも答えてくれる エラーメッセージをコピーしてググればたいていの答えはStack Overflowで出尽くしている 目次1 Gemfile2 herokuにアプリ作成 …

no image

Rails3.2.8でPostgreSQLを使う(開発環境)〜pg gem

環境 Ubuntu server12.04にPostgreSQLをインストールする 参考 #342 Migrating to PostgreSQL @railscasts 目次1 準備2 データベース …

no image

Rails3でTwitter Bootstrapのサーチフォームを実装する~form_tag

目次1 git & gitolite2 仕組みを考える3 フィーチャの作成4 Viewの作成5 Controllerの作成6 Modelの作成7 テストが通らない!8 mergeして終わり g …

Rails3.2でコードのお作法を指摘してもらう~Rails Best Practices

コードのお作法を自動でチェックしてくれるrails_best_practiceを導入した

あとは、Railsのルートで[crayon- …

Rails3でテストカバレッジを計測する~simplecov,thin

    rspecなどのテストでテストがどの程度カバーしているのかを簡単に計測するsinplecovというgemをいれた 目次1 Gemfile & bundle2 spe …