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

執筆者:

関連記事

Rails3でajaxでD&Dでまとめてファイルアップロードをスクラッチで~jQueryFileUpload for Rails

参考 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Rails3でajaxでD&Dでまとめてファイルアップロード2 …

RubyでFaye-websocketを試す

By: Jenny Ondioline – CC BY 2.0 目次1 公式2 インストール3 サーバ側4 クライアント側5 エラー 公式 faye-websocketは、fayeからwe …

WindowsのRubyでxlsxファイルを生成する~axlsx

By: Roman Boed – CC BY 2.0 目次1 axlsxのインストール2 hello axlsx3 サンプル4 参考 axlsxのインストール コマンドラインからインストー …

RailsでECサイト構築5 プロモーションを試す~spree

  spreeをインストールするとspree-promoというエクステンションが含まれている これを使うといろいろな販売企画をすることができる 管理画面から適当に作成してみる 今回は特定の商 …

no image

Railsで動画ファイルを管理する~CarrierWave Flowplayer

  参考 Ruby on Rails 3.2でファイルアップロード〜CarrierWave & RMagick Rails3で動画配信を試用~flowplayer 環境 Ubuntu …