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でdocxをフォーマット指定でダウンロードできるようにする

タイトルだけだと何のことだかわからない railsでdocuments/2とかをGETメソッドで呼び出すとdocumentsコントローラーのshowメソッドを呼び出すようになってるんだけど、docum …

RailsでECサイト構築4 確認メールを送る~spree

  spreeでは注文したときと発送したときにメールを送信できるように設定できるので、やってみた   目次1 設定2 翻訳 設定 管理画面から設定>メールシステムの設定から これで …

Railsでチェックボックスで複数選択するとき〜check_box_tag

By: Luca Masters – CC BY 2.0 目次1 問題2 アンサー3 情報 問題 チェックボックスで複数選択可のフォームでうまくparamsにはいらない 例1 [crayo …

Ubuntu ServerのGuardからGrowl for Windowsにネットワーク経由で通知する

github.com/guard/guard 普段はWindows7から仮想環境(VirtualBox)のUbuntu Server 12.04.1へputtyで接続して開発してます. Virtual …

Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails

  目次1 jQuery ajax送信側2 app/views/folders/show.js.coffee3  で、コントローラーを設定4 今までのは置いといてJsonでやり取りするアプロ …