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

Transcript

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

   View Slide

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

   View Slide

3. Webpacker
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. Simpacker
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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の書き出し
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide