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
-, , ,

執筆者:

関連記事

RailsでHTML5対応のvideoプレイヤーを利用してみる~flowplayer5.0.0

  参考 flowplayer.org/ Flowplayerのサイトからバージョン5.0.0がダウンロードできる flowplayer-gemのバージョンは3.2.4 バージョン5では基本 …

Rails3で帳票印刷を試す~thinreports

By: ZZ Bottom – CC BY 2.0 目次1 Thinreports2 とりあえずサンプルを試してみた3 ソースを見てみる1~詳細画面4 ソースを見てみる2~一覧表 Thin …

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

Railsでajaxなテーブルを使う~datatables

    github.com/rweng/jquery-datatables-rails 目次1 Gemfile2 application.js3 application.css4 …

ActionCableのサンプルをみてみた

By: Samantha Brough – CC BY 2.0 目次1 ActionCableとは2 rails4での利用3 redisサーバーの準備4 cableサーバーの準備5 チャッ …