Closed10

Vue CLIからViteへ移行する

Vite

Native-ESM powered web dev build tool. It's fast.

ViteとはVue.js作者のEvan You氏らが開発しているネイティブESモジュールのインポートを使ったバンドル不要のビルドツールで、従来のバンドルツールよりも高速に動作する。らしい。

https://github.com/vitejs/vite#hot-module-replacement

Although Vite is primarily designed to work with Vue 3, it can support other frameworks as well. For example, try npm init vite-app --template react or --template preact.

Vue.jsのほかReact, Preactのビルドもサポートされている。

ビルド後のパフォーマンスは従来と変わらないようだが、開発サーバの起動やビルド時間を改善したい人には導入する価値があると思う。

日本語では次の投稿がたいへん参考になる。

https://qiita.com/ryo2132/items/c1530dd590e34e68c494

2020/12/28 追記
READMEの下のほうにあって読み飛ばしてしまってたけど、類似のツールと何が違うの?何がいいの?に対する回答 How and Why も書かれていたので参考になった。

Vue CLIからViteへの移行

そんなViteがかなり良さげなので思い切ってVue CLIからViteへ移行してみたい。
今回はVue 3の正式リリースに先駆けて導入していた、Vue CLI(Vue 2.x + @vue/composition-api)なプロジェクトをVite(Vue 3.x; Composition API 標準サポート)対応にしていく。

Viteによって生成されるプロジェクトの雛形を確認してみる

試しにGetting Startedに従って、Vue.jsプロジェクトの雛形を生成から開発サーバ起動までしてみた。

$ yarn create vite-app portfolio
$ cd portfolio
$ yarn install
$ yarn dev

雛形だとプロジェクトが小さくて体感スピードの違いがよくわからなかったけど、モジュールの容量が増えていったとき大きな恩恵を感じられそう。

生成したプロジェクトのpackage.jsonは次のようになっていた。(2020/12/24 現在)

package.json
{
  "name": "portfolio",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  }
}

Vite自体の依存関係はほとんどないのがわかる。
なので、既存のプロジェクトで使っていたものへの対応は別途、Featuresにまとまっているドキュメントを順に見ていけば良さそう。

TypeScript

例えば、TypeScript対応について。

Vite supports importing .ts files and <script lang="ts"> in Vue SFCs out of the box.

とあるので、素の.tsファイルかVue.jsのSingle File Componentsなら <script lang="ts"> でTypeScriptが使えるらしい。
あとはViteで内部的に使われているesbuildがいい感じにTypeScriptをJavaScriptにトランスパイルしてくれる。

Vue CLI(Vue 2.x + @vue/composition-api)時代から上記のフォーマットでコンポーネントを開発していたので、ここの対応はほとんど何もせず移行できそう。

Vue 2からVue 3への完全移行

既存のプロジェクトはVue 3の正式リリースに先駆けてComposition APIを導入していたため、Vue CLI(Vue 2.x + @vue/composition-api)なちょっと複雑な構成になっていた。
そのため、Viteへの移行以前に、まずはVue 2をVue 3に完全移行していく。

基本的には公式のマイグレーションガイドに沿って移行していくことにした。
Vue RouterVuexの移行方法についてもまとめられているので大抵はこのドキュメントを見れば解決できそう。

修正項目をまとめていこうかと思ったけど、日本語による網羅性の高いまとめが既にあったので割愛する。

https://qiita.com/laineus/items/d1f1f7972f521556a788

詰まったところ

new Vue() から createApp() への移行

その際、

Argument of type 'typeof import(“../dist/vue”)' is not assignable to parameter of type 'xxx'. ts(2345)

のようなエラーが発生し、下記の型定義ファイルshims-vue.d.tsの修正が必要だった。

修正前:Vue 2

shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}

修正後:Vue 3

shims-vue.d.ts
declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

https://stackoverflow.com/questions/62216862/error-in-vue3-argument-of-type-typeof-import-dist-vue-is-not-assignabl

Routerのパスに指定するワイルドカード*

path: '*', から path: '/:pathMatch(.*)*', を使うように修正する必要があった。
Removed * (star or catch all) routes

実際の移行作業に関するコミットはこちら

https://github.com/konnyaku256/portfolio/pull/13

本題:Vue CLIからViteへ移行する

前回紹介したREADMEのFeaturesViteで生成した雛形を参照しながら移行作業を行った。

やったこと

大まかな流れは次のような感じ。

  • package.jsonにViteの依存関係を追加
  • tsconfig.jsonに設定を追加
  • index.htmlを修正
    • ./public/ から ./ へ移動
    • <script type="module" src="/src/main.ts"></script> でVue.jsアプリのエントリーポイントをES Modulesとして読み込むように
    • favicon は相対パスで読み込み
  • Vue SFCなどの読み込みを全て相対パスに変更

main.tsを読み込むようにするところは次のQ&Aが参考になった。

https://stackoverflow.com/questions/63724523/how-to-add-typescript-to-vue-3-and-vite-project

実際の移行作業に関するコミットはこちら

https://github.com/konnyaku256/portfolio/pull/15
// vite.config.ts
import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src')
    }
  },
  plugins: [vue()]
});

これでエリアス適用すると、@使えたのでもしよかったら試してみてください。

コメントありがとうございます!
こちら設定してみたら@使えるようになりました~
alias使えるの知らなかったのでとても参考になりました!

デプロイして動作確認

本番環境へのデプロイも無事完了。
特に問題なく動いてくれてました。

実際に公開されている私のポートフォリオサイト

https://konnyaku256.dev/

CircleCIの結果

[ATTENTION] ホスティング先がGitHub Pagesの場合

GitHub Pagesでは標準でJekyllによって静的ファイルがホスティングされる。
Viteでは vite build すると、標準でアセットが _assets ディレクトリ以下に生成されるが、これがJekyllの制約にひっかかるらしい。

対策

公開するディレクトリ直下に空の .nojekyll ファイルを配置しておけば、Jekyllを無効にすることができる。

References

https://qiita.com/sterashima78/items/b3ed8201c2a4019b718b
https://github.com/vitejs/vite/issues/238
このスクラップは2020/12/28にクローズされました
ログインするとコメントできます