Webpacker移行ガイド 2020/08/18 Shota Iguchi 

agenda ● Webpackerを移行する動機 ● Simpackerの紹介と移行方法 

Webpacker 

4. コンパイル $ bundle exec rails assets:precompile $ bundle exec rails webpacker:compile 5. viewでヘルパーメソッドをつかってロード <%= javascript_pack_tag 'application' %> <%= stylesheet_pack_tag 'application' %> Webpackerの使い方おさらい 1. Gemfileに追記 gem 'webpacker', '~> 5.x' 2. インストール $ bundle install $ bundle exec rails webpacker:install 3. ソースコードを app/javascript に置く app/javascript : ├── packs: │ # only webpack entry files here │ └── application.js │ └── application.css └── src: │ └── my_component.js └── stylesheets : │ └── my_styles.css └── images: └── logo.svg 

Webpackerの特徴 Webpacker Webpacker gem npm @rails/webpacker ● webpack ● webpack-assets-manifest ● babel ● postcss 

Webpackerの特徴 ● webpacker gem ○ railsアプリケーションへのインストーラ、ヘルパーメソッドを提供 ● @rails/webpacker ○ webpack、babel、postcss、productionビルドの最適化用プラグインなど の全部入りのパッケージ ○ https://gist.github.com/iguchi1124/cf1976baa8139793b504ab02f5e56bb7 ● webpack-assets-manifest ○ webpacker gemが提供するヘルパーメソッドは、このパッケージが生成し たmanifestファイルに依存 ○ https://gist.github.com/iguchi1124/3cd7fae9b5a322d23adc51cec6eddea7 

Webpackerの機能 ● Rails wayに乗れる ○ 設定より規約 ○ 自分で設定を書く必要がない ● webpackの設定を隠蔽 ○ app/javascript/packs ディレクトリ配下のファイルを エントリポイントとしてコンパイル ○ ES2015 with babel / PostCSS / Images / Fonts ● ヘルパーメソッドの提供 ○ manifestファイルをもとにwebpackの生成物をrailsアプリのviewでロードす るためのヘルパーメソッド 

Webpackerを移行する動機 ● webpack関連のアップデートのボトルネックになる ○ webpackerの対応を待ってからアップデートする必要がある ○ npmパッケージを最新に保つことが難しくなる ● webpackerのメンテナンス性がそもそも良くない ○ バージョンアップグレードが難しい ○ webpackの設定が隠蔽されるため、webpackユーザーにとって 設定の扱いが難しい 参考: https://techlife.cookpad.com/entry/2019/07/08/100000 

Webpackerをやめる方法 ● Webpackerの代替となるツールを採用する ○ Simpacker ■ bundler非依存で、webpackとparcelを標準サポート ○ Minipack ■ webpackのみサポート ● 自分でwebpack configとヘルパーメソッドを書く ○ 開発コストがかかる 

Simpacker 

Simpackerの特徴 ● 使い方や導入手順は基本的にWebpackerと同じ ● ヘルパーメソッドの提供 ○ Webpackerと同じシグニチャのヘルパーメソッドを提供 ○ アプリケーションコード上の互換性が高い ● webpackの設定を内包しない ○ フロントエンドの開発環境は自分が記述した設定次第 ○ webpackなどのパッケージの管理は自分たちで行える ● バンドラー非依存 ○ 現状は、webpackとparcelをサポート 

Simpackerの特徴 Simpacker gem + webpack & webpack-assets-manifest parcel & parcel-plugin-bundle-manifest npm OR 

● 現在使っているwebpackerと互換性を保つ ○ 導入後の生産性を落とさない ○ バンドラーはwebpackを使用 ○ ソースコードを置くディレクトリ、コンパイル時の出力先は変えない ● 不要なnpmパッケージの削除 ○ @rails/webpackerにくっついてくるいらないパッケージは削除する Simpackerへの移行に気をつけたいこと 

● simpackerのインストールとwebpackerのアンインストール ● webpack configの書き出し ● CIやデプロイ用のスクリプトの対応 ○ railsが実装しているwebpackerのビルドに使っているコマンドの代わりにな るものを作成 Simpackerへの移行作業 

Webpacker Webpacker gem npm @rails/webpacker ● webpack ● webpack-assets-manifest ● babel ● postcss Simpacker gem + webpack & webpack-assets-manifest npm WebpackerからSimpackerへの移行イメージ 

Simpackerのインストール ● Gemfileに追記してbundle install gem 'simpacker' ● Simpackerのインストールコマンドを実行 ○ 必要な設定ファイル config/simpacker.yml が生成される $ rails simpacker:install ● webpackとwebpack-assets-manifestをインストール $ yarn add -D webpack webpack-assets-manifest 

Webpack configの書き出し ● @rails/webpackerの内部を読み解きながら進める ● webpack configをデバッグ出力し、手書きのconfigと値が 等しくなるように地道にやっていく ○ 利用している@rails/webpackerのソースコードから実装を持ってくると楽で きる 

Webpack configの書き出し ● webpack configの読み方 ○ webpackerによるコンパイルのコマンドはアプリケーションの config/webpack/#{NODE_ENV}.js をwebpackの設定ファイルとして 読み出すので、一番はじめに参照すべき場所はこのファイル ■ https://github.com/rails/webpacker/blob/ce0133d/lib/webpacker/runner.rb#L14 ○ 次に @rails/webpacker の内部を読んでいく ■ https://github.com/rails/webpacker/blob/fcb5763/package/environments/base.js 

Webpack configの書き出し ● webpack configをデバッグ出力 ○ config/webpack/#{NODE_ENV}.js でデバッグ出力を仕込む diff --git a/config/webpack/development.js b/config/webpack/development.js index c5edff9..1d17529 100644 --- a/config/webpack/development.js +++ b/config/webpack/development.js @@ -2,4 +2,8 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'development' const environment = require('./environment') -module.exports = environment.toWebpackConfig() +const webpackConfig = environment.toWebpackConfig() + +console.log(webpackConfig) + +module.exports = webpackConfig 

ソースコードの配置場所を移行前と同じ設定に ● ソースコードは app/javascript に置く ○ resolve.modules を app/javascript に設定 ■ https://webpack.js.org/configuration/resolve/#resolvemodules ■ https://github.com/rails/webpacker/blob/fcb5763/package/environments/base.js#L83-L91 ● エントリポイントは app/javascript/packs に置く ○ entry に app/javascript/packs/**/*.js を設定 ■ https://webpack.js.org/configuration/entry-context/#entry ■ https://github.com/rails/webpacker/blob/fcb5763/package/environments/base.js#L59-L81 Webpack configの書き出し 

Webpack configの書き出し 出力先を移行前と同じ設定にする ● 出力先は public/packs 以下に設定する ○ output.path を #{project_root}/public に設定 ■ https://webpack.js.org/configuration/output/#outputpath ○ output.publicPath に /packs/ を設定 ■ CDNを使用している場合は CDNを考慮した値にする ■ https://webpack.js.org/configuration/output/#outputpublicpath 

Webpack configの書き出し ● webpack-assets-manifest をインストール ○ plugins にWebpackAssetsManifestを追加 ■ https://webpack.js.org/configuration/plugins/ ■ https://github.com/rails/webpacker/blob/fcb5763/package/environments/base.js#L43-L50 

webpackのビルドコマンドを整備 ● yarn run、npm-scriptsを使うようにワークフローを改善 ○ yarn run webpack ○ yarn run webpack --watch ○ yarn run webpack-dev-server 

CIの設定やデプロイスクリプトの対応 ● rails webpacker:compile相当のコマンドを追加 ○ webpackerはrails assets:precompile実行時に自動でwebpackの コンパイルを実行している ○ Rake taskを追加してprecompileで自動実行するか、明示的に コンパイル用のコマンドを追記する 

参考資料 ● hokaccha/simpacker: Use modern JavaScript build system in Rails ● Simpacker: Rails と webpack をもっとシンプルにインテグレーションしたいので す