Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shota Iguchi
August 18, 2020
350

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

Shota Iguchi

August 18, 2020
Tweet

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