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

執筆者:

関連記事

テキストマイニングの初歩 Rubyで形態素解析を行う〜ruby-mecab

By: Cracker Jack – CC BY 2.0 環境 ubuntu server 12.04 英語は単語を空白で区切るのでコンピュータでの解析に向いているが、日本語は助詞などを続 …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

Rails4で複雑な検索〜Ransack

By: eric molina – CC BY 2.0 株価データをつかって複雑な絞り込み検索ができるようにしてみた データは、こちらのサンプルを使わせていただいた datawarehou …

no image

Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails

  公式 backbonejs.org/ Backbone ドキュメント日本語訳 github.com/enja-oss/Backbone イントロダクション github.com/enja

Rubyでウェブサイトを操作してリストをつくる〜mechanize

    By: JoshSemans   以前からRailscastsというRuby on Railsの動画サイトが好きでよく見ているのだが、380近く動画があって気にな …