Webpackerとは (Rails6で rails s してエラーが出た時の話)

3799 ワード
Rails6 Rails webpacker Gem webpack Rails テキストリンク

Rails6で新規アプリを作成しようとし、データベース作成後に
rails sでサーバを起動しようとしたところ、以下のようなエラーが出ました。

$ rails s
=> Booting Puma
=> Rails 6.0.3.3 application starting in development 
=> Run `rails server --help` for more startup options
Exiting
Traceback (most recent call last):
    77: from bin/rails:3:in `<main>'
    76: from bin/rails:3:in `load'
　　　　　　　　　　・
　　　　　　　　　　・
　　　　　　　　　　・
Webpacker configuration file not found /Users/<ユーザー名>/<アプリ名>/config/webpacker.yml.
Please run rails webpacker:install
Error: No such file or directory @ rb_sysopen - 
/Users/<ユーザー名>/<アプリ名>/config/webpacker.yml (RuntimeError)

「Webpackerの設定ファイルが見つかりません」とのこと。
/config/webpacker.ymlがあるべきだそう（なかった）。

Webpackerとは

JavaScriptのビルドツール「Webpack」のラッパーで、RailsアプリケーションでWebpackを使ってJavaScriptを管理することを簡単にしてくれるGem
現場で使えるRuby on Rails5 速習実践ガイド

私は「RailsでJavaScriptを使えるようにする為に色々よしなにしてくれるGem」と理解しました・・・。
(この辺りの理解は今後深めていけたら。)

またRailsガイドv6.0によると、「WebpackerがRails 6のデフォルトJavaScriptコンパイラになる」とあり、
rails newした時点で「gem 'webpacker'」がGemfileに書かれている理由がわかります。
以前はSprockets (スプロケッツ)というものがJavaScriptの標準ビルドツールとなっていたようです。

rails webpacker:installしてみる

どうしてGemfileに書いてあったのにWebpackerがインストールされてないんだっ、と思うところですが、
大人しく「rails webpacker:install」してみると

$ rails webpacker:install
Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

「Yarnがインストールされていません」と言われてしまいました。
この為にrails newした時にWebpackerがインストールされなかったのでしょう。

Yarnとは

JavaScriptのパッケージマネージャのこと。
下記の記事がわかりやすかったです。
JavaScriptのパッケージマネージャーnpmとYarnについて解説します！

Yarnのインストール

$ brew install yarn

もう一度 rails webpacker:install をしてみる

$ rails webpacker:install
      create  config/webpacker.yml
Copying webpack core config
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/environment.js
      create  config/webpack/production.js
      create  config/webpack/test.js
　　　　　　　　　　・
　　　　　　　　　　・
　　　　　　　　　　・
Webpacker successfully installed 🎉 🍰

無事にWebpackerをインストールできました。

あらためて rails s してみる


エラー回避できました。

次回予告

webpackerのしくみ

参考にさせていただきました

Rails6 Webpackerでエラーが出た