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

Nuxt 3 移行に向けてがんばっています

offich
February 17, 2023
2.1k

Nuxt 3 移行に向けてがんばっています

offich

February 17, 2023
Tweet

Transcript

  1. はじめに 8 3行サマリー • 有識者でワーキンググループを作って、Nuxt 3 移行を進めているよ • Nuxt 3

    へのマイグレートではなく、まずは Nuxt Bridge を使う段階 的なアップデートを行うことにしたよ • Nuxt Bridge が依存している Vue 2.7 にアップデートしたので、こ れから Nuxt Bridge を入れて、最終的に Nuxt 3 で動かせるようにす るよ
  2. 今までやってきたこと 13 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備

    ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
  3. 今までやってきたこと(Nuxt Bridge 移行への準備) 14 ② Vue 2.7 移行への準備 ① Nuxt

    Bridge 移行への準備 ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
  4. 今までやってきたこと(Nuxt Bridge 移行への準備) 15 • Nuxt 3 へあげる • Nuxt

    Bridge を使用する 1. Nuxt 3 = Vue 3 なので、Vue 3 に直接移行するのは難易度が高いた め 2. Nuxt Bridge なら、Vue 2.7 にあげつつ、Nuxt3の恩恵をある程度受 けられるため 3. Nuxt Bridgeで動かない Nuxt Modules がいくつかあるが、それらは 剥がして自分達で作れるため
  5. 今までやってきたこと 17 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備

    ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
  6. 今までやってきたこと(Vue 2.7 移行への準備) 18 社内デザインシステムライブラリの Vue 2.7 移行 • 弊社のデザインシステムで使用している

    UI ライブラリを Vue 2.7 に あげて動かない箇所の修正 ◦ https://careerhack.en-japan.com/report/detail/1553
  7. 今までやってきたこと 19 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備

    ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
  8. 今までやってきたこと(Jest から Vitest への移行) 22 壊れたテストの修正 • Jest で動かすことに時間をかけるよりは、Vitest を使用して解

    決できることがわかったので、そちらに移行することに採用 • 解決も図れて、@Nuxt/test-utils は Vitest の両方をサポートし ているため、Nuxt Bridge 移行では Vite を利用していきたい
  9. 今までやってきたこと(Jest から Vitest 移行) 23 大変だったこと • Webpack でビルドしている社内旧UIラ イブラリでUMD

    形式の出力だと、なぜ か Vitest の中で空でレンダリングされ ていた。 • そこで ESM 形式に出力して、Vitest の中でしっかり UI ライブラリがレンダ リングされるようにした
  10. 今までやってきたこと(Jest から Vitest 移行) 24 大変だったこと • Vitest で実行すると、Jest での実行時間

    より長く伸びてしまうことがわかった • GitHub Actions で並列で処理をするよう にして、遅くなるのを回避 ◦ 結果、10分 -> 4分の短縮に成功!!
  11. 今までやってきたこと 25 ② Vue 2.7 移行への準備 ① Nuxt Bridge 移行への準備

    ④ Vue 3 への移行準備 ③ Jest から Vitest への移行
  12. 今までやってきたこと(Vue 3 への移行準備) 26 Vue 3 への対応 • Vue.extend を

    defineComponent へ変更 • コンポーネントに Emits Options を追加 • .sync 修飾子 API の書き直し • Slots API の書き直し
  13. 今までやってきたこと(Vue 3 への移行準備) 27 大量ファイルの中の API の置き換えや追加 • ダッシュボードの Vue

    ファイルは 1240 ファイルもある • とても手作業で全部を行うことは難しい、、、。
  14. 今までやってきたこと(Vue 3 への移行準備) 30 • Vue Composition Converter ◦ Option

    API から Composition API に変更する • Vue Script Setup Converter ◦ Composition API から Script Setup に変更する • Vue Mixins Converter ◦ Mixin から Composition API に変更する • Insert Emits Options ◦ コンポーネントのOption に Emits を追加する
  15. 終わりに(よかったこと) 32 Vue 2.7 で動かせるメリットが大きい • Script Setup で書けるようになった 🎉🎉🎉

    • vue-tsc で生成したコンポーネントの型と Nuxt の components オプションの型が互換性があるようになった
  16. 終わりに(学び) 34 Nuxt 3 移行行うことは多くある • Nuxt Bridge を使うにも、先に Vue

    2.7 対応が入る • Nuxt 3 にあげるにも、Vue 3 対応が入る