Webpacker移行ガイド / Migrating from Webpacker to Simpacker

Transcript

1. Webpacker移行ガイド 2020/08/18 Shota Iguchi
2. agenda • Webpackerを移行する動機 • Simpackerの紹介と移行方法
3. Webpacker
4. 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
5. Webpackerの特徴 Webpacker Webpacker gem npm @rails/webpacker • webpack • webpack-assets-manifest • babel • postcss
6. 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
7. Webpackerの機能 • Rails wayに乗れる ◦ 設定より規約 ◦ 自分で設定を書く必要がない • webpackの設定を隠蔽 ◦ app/javascript/packs ディレクトリ配下のファイルを エントリポイントとしてコンパイル ◦ ES2015 with babel / PostCSS / Images / Fonts • ヘルパーメソッドの提供 ◦ manifestファイルをもとにwebpackの生成物をrailsアプリのviewでロードす るためのヘルパーメソッド
8. Webpackerを移行する動機 • webpack関連のアップデートのボトルネックになる ◦ webpackerの対応を待ってからアップデートする必要がある ◦ npmパッケージを最新に保つことが難しくなる • webpackerのメンテナンス性がそもそも良くない ◦ バージョンアップグレードが難しい ◦ webpackの設定が隠蔽されるため、webpackユーザーにとって 設定の扱いが難しい 参考: https://techlife.cookpad.com/entry/2019/07/08/100000
9. Webpackerをやめる方法 • Webpackerの代替となるツールを採用する ◦ Simpacker ▪ bundler非依存で、webpackとparcelを標準サポート ◦ Minipack ▪ webpackのみサポート • 自分でwebpack configとヘルパーメソッドを書く ◦ 開発コストがかかる
10. Simpacker
11. Simpackerの特徴 • 使い方や導入手順は基本的にWebpackerと同じ • ヘルパーメソッドの提供 ◦ Webpackerと同じシグニチャのヘルパーメソッドを提供 ◦ アプリケーションコード上の互換性が高い • webpackの設定を内包しない ◦ フロントエンドの開発環境は自分が記述した設定次第 ◦ webpackなどのパッケージの管理は自分たちで行える • バンドラー非依存 ◦ 現状は、webpackとparcelをサポート
12. Simpackerの特徴 Simpacker gem + webpack & webpack-assets-manifest parcel & parcel-plugin-bundle-manifest npm OR
13. • 現在使っているwebpackerと互換性を保つ ◦ 導入後の生産性を落とさない ◦ バンドラーはwebpackを使用 ◦ ソースコードを置くディレクトリ、コンパイル時の出力先は変えない • 不要なnpmパッケージの削除 ◦ @rails/webpackerにくっついてくるいらないパッケージは削除する Simpackerへの移行に気をつけたいこと
14. • simpackerのインストールとwebpackerのアンインストール • webpack configの書き出し • CIやデプロイ用のスクリプトの対応 ◦ railsが実装しているwebpackerのビルドに使っているコマンドの代わりにな るものを作成 Simpackerへの移行作業
15. Webpacker Webpacker gem npm @rails/webpacker • webpack • webpack-assets-manifest • babel • postcss Simpacker gem + webpack & webpack-assets-manifest npm WebpackerからSimpackerへの移行イメージ
16. Simpackerのインストール • Gemfileに追記してbundle install gem 'simpacker' • Simpackerのインストールコマンドを実行 ◦ 必要な設定ファイル config/simpacker.yml が生成される $ rails simpacker:install • webpackとwebpack-assets-manifestをインストール $ yarn add -D webpack webpack-assets-manifest
17. Webpack configの書き出し • @rails/webpackerの内部を読み解きながら進める • webpack configをデバッグ出力し、手書きのconfigと値が 等しくなるように地道にやっていく ◦ 利用している@rails/webpackerのソースコードから実装を持ってくると楽で きる
18. 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
19. 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
20. ソースコードの配置場所を移行前と同じ設定に • ソースコードは 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の書き出し
21. 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
22. 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
23. webpackのビルドコマンドを整備 • yarn run、npm-scriptsを使うようにワークフローを改善 ◦ yarn run webpack ◦ yarn run webpack --watch ◦ yarn run webpack-dev-server
24. CIの設定やデプロイスクリプトの対応 • rails webpacker:compile相当のコマンドを追加 ◦ webpackerはrails assets:precompile実行時に自動でwebpackの コンパイルを実行している ◦ Rake taskを追加してprecompileで自動実行するか、明示的に コンパイル用のコマンドを追記する
25. 参考資料 • hokaccha/simpacker: Use modern JavaScript build system in Rails • Simpacker: Rails と webpack をもっとシンプルにインテグレーションしたいので す