Slide 1

Slide 1 text

UIコンポーネント Vue3マイグレーション体験記 ~npm workspace機能を使ったモノレポ構成編~

Slide 2

Slide 2 text

自己紹介 1 爲本 雄亮 Tamemoto Yusuke 2022年にWebデザイナーとしてヤフー 株式会社に新卒入社。 2023年7月からPayPayカード株式会社 に主務出向し、デザインエンジニアと してPayPayカードのWeb/アプリにお ける実装、運用、改善業務に携わる。

Slide 3

Slide 3 text

背景 š Vueの2系が2023年の12月末にEOLになる。 š PayPayカード内ではvue2系を使ったサービスが多いため、セキュリ ティ関連で3系にマイグレーションしなければいけない。 š もちろんパッケージとして配信されている共通のUIコンポーネント群 もサービス内で利用されており、3系にマイグレーションする必要が ある。 2

Slide 4

Slide 4 text

背景 š フロントエンドバリデーションライブラリ vee-validateをv3からv4にしなければ ならないこと š 移行スケジュールとの兼ね合いでvite4とwebpack4の両環境で動作するよう資材を配 布しなければならないこと UIコンポーネントをVue3にマイグレーションする上での大きな2つの壁 3

Slide 5

Slide 5 text

背景 š フロントエンドバリデーションライブラリ vee-validateをv3からv4にしなければな らないこと š 移行スケジュールとの兼ね合いでvite4とwebpack4の両環境で動作するよう資材を配 布しなければならないこと š → 今回はここの話 UIコンポーネントをVue3にマイグレーションする上での大きな2つの壁 4

Slide 6

Slide 6 text

課題 Vue2(Webpack) Vue2(Vite) Vue3(Vite) Vue2(Webpack) Vue2 (Webpack and Vite) Vue3(Vite) 当初の想定 実際 1 2 3 1 2 3 5

Slide 7

Slide 7 text

課題 Vue2(Webpack) Vue2(Vite) Vue3(Vite) Vue2(Webpack) Vue2 (Webpack and Vite) Vue3(Vite) 当初の想定 実際 1 2 3 1 2 3 6

Slide 8

Slide 8 text

課題 ViteとWebpack両方のビルド環境を用意し、 どちらでも正常に動作するようにコンポーネント整 理する必要がある 7

Slide 9

Slide 9 text

Q. みなさんならどうしますか? 8

Slide 10

Slide 10 text

A. npm workspace機能を使って、WebpackとViteの環境を分離 9

Slide 11

Slide 11 text

課題 src/ packages/ vite/ package.json webpack/ package.json package.json package.json Vite package.json Webpack 10

Slide 12

Slide 12 text

npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かない。 11

Slide 13

Slide 13 text

npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かない。 12

Slide 14

Slide 14 text

Swiperで利用されているscssのimport関連でビルドが通らない š 当初swiper6系を利用していた。 š Swiper6系はproduction build時にpagination componentのscssが抜け落ちて しまう事象が解決されていない š https://github.com/nolimits4web/swiper/issues/3777 š HACK対応でrequireを使えばうまく動作するが、Vite環境でrequireが使えない。 Swiper7系でその事象が解決されているため、Vue3対応時には取り急ぎv7までバー ジョンアップ š https://github.com/nolimits4web/swiper/projects/2 13

Slide 15

Slide 15 text

Swiperで利用されているscssのimport関連でビルドが通らない swiper7系はESM非対応のimportとESM対応の両方ともでスタイルを引っ 張ってくる方法を提供している。 14 https://swiperjs.com/react#usage-with-create-react-app https://v7.swiperjs.com/migration-guide#styles-imports

Slide 16

Slide 16 text

Swiperで利用されているscssのimport関連でビルドが通らない swiper7系はESM非対応のimportとESM対応の両方ともでスタイルを引っ 張ってくるやり方を提供している。 š Webpack側はESM対応のimportでスタイルを持ってこようとするとエラー、 š 一方Vite側でESM非対応用に用意されたものはInternal server Errorに落ちる 15

Slide 17

Slide 17 text

Q. みなさんならどうしますか? 16

Slide 18

Slide 18 text

webpack/vite example.vue 自前でconfigファイルにaliasを設定することで解決 17

Slide 19

Slide 19 text

npm workspace機能による課題 š Swiperで利用されているscssのimport関連でビルドが通らない š Viteでは変数を含んだimportの場合、~などのエイリアスが効かな い。 18

Slide 20

Slide 20 text

viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない これはrollupの制約であり、相対パスで設定しなければならない 19 https://github.com/rollup/plugins/tree/master/packages/ dynamic-import-vars#imports-must-start-with--or-

Slide 21

Slide 21 text

viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない 例えば、svgファイルを動的に取得する際に問題が生じる 20 webpack vite

Slide 22

Slide 22 text

Q. みなさんならどうしますか? 21

Slide 23

Slide 23 text

A. Vue.prototypeでそれぞれのsvg取得関数を流し込むことで解決 22

Slide 24

Slide 24 text

viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない webpack Vite 23

Slide 25

Slide 25 text

viteでは変数を含んだimportを行う場合、~などのエイリアス が効かない これにより、コンポーネント側(利用側)ではvite/webpackの依存なく 同名関数を利用しており、アプリ起動時に処理が決定するのでそれぞれ正 常に動作することができる。 24

Slide 26

Slide 26 text

学び 2つの解決策に共通することは、実装の詳細を外 部からは見えないようにしてること。 オブジェクト思考の原則は、こういったケースで も役立つんだなと思いました。 25

Slide 27

Slide 27 text

まとめ š 同じコンポーネントに対してwebpack4とvite4の2つでビルドできる ような構成にしなければならない。 š npmのworkspace機能でVite用とWebpack用の両方を提供できるようなモノレポ 構成に変更した。 šSwiperで利用されているscssのimport関連でビルドが通らない š自前でconfigファイルにaliasを設定することで解決 šViteでは変数を含んだimportの場合、~などのエイリアスが効かない。 šVue.prototypeでそれぞれのsvg取得関数を流し込むことで解決 26

Slide 28

Slide 28 text

ご清聴ありがとうございました! 27