Vue CLIからViteへ移行する
konnyaku256Vite
Native-ESM powered web dev build tool. It's fast.
ViteとはVue.js作者のEvan You氏らが開発しているネイティブESモジュールのインポートを使ったバンドル不要のビルドツールで、従来のバンドルツールよりも高速に動作する。らしい。
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のビルドもサポートされている。
ビルド後のパフォーマンスは従来と変わらないようだが、開発サーバの起動やビルド時間を改善したい人には導入する価値があると思う。
日本語では次の投稿がたいへん参考になる。
2020/12/28 追記
READMEの下のほうにあって読み飛ばしてしまってたけど、類似のツールと何が違うの？何がいいの？に対する回答 How and Why も書かれていたので参考になった。
konnyaku256Vue CLIからViteへの移行
そんなViteがかなり良さげなので思い切ってVue CLIからViteへ移行してみたい。
今回はVue 3の正式リリースに先駆けて導入していた、Vue CLI（Vue 2.x + @vue/composition-api）なプロジェクトをVite（Vue 3.x; Composition API 標準サポート）対応にしていく。
konnyaku256Viteによって生成されるプロジェクトの雛形を確認してみる
試しにGetting Startedに従って、Vue.jsプロジェクトの雛形を生成から開発サーバ起動までしてみた。
$ yarn create vite-app portfolio
$ cd portfolio
$ yarn install
$ yarn dev
雛形だとプロジェクトが小さくて体感スピードの違いがよくわからなかったけど、モジュールの容量が増えていったとき大きな恩恵を感じられそう。
生成したプロジェクトのpackage.jsonは次のようになっていた。（2020/12/24 現在）
{
"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にまとまっているドキュメントを順に見ていけば良さそう。
konnyaku256TypeScript
例えば、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）時代から上記のフォーマットでコンポーネントを開発していたので、ここの対応はほとんど何もせず移行できそう。
konnyaku256Vue 2からVue 3への完全移行
既存のプロジェクトはVue 3の正式リリースに先駆けてComposition APIを導入していたため、Vue CLI（Vue 2.x + @vue/composition-api）なちょっと複雑な構成になっていた。
そのため、Viteへの移行以前に、まずはVue 2をVue 3に完全移行していく。
基本的には公式のマイグレーションガイドに沿って移行していくことにした。
Vue RouterやVuexの移行方法についてもまとめられているので大抵はこのドキュメントを見れば解決できそう。
修正項目をまとめていこうかと思ったけど、日本語による網羅性の高いまとめが既にあったので割愛する。
詰まったところ
new Vue() から createApp() への移行
その際、
のようなエラーが発生し、下記の型定義ファイルshims-vue.d.tsの修正が必要だった。
修正前：Vue 2
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
修正後：Vue 3
declare module "*.vue" {
import { defineComponent } from "vue";
const component: ReturnType<typeof defineComponent>;
export default component;
}
Routerのパスに指定するワイルドカード*
path: '*', から path: '/:pathMatch(.*)*', を使うように修正する必要があった。
Removed * (star or catch all) routes
実際の移行作業に関するコミットはこちら
konnyaku256本題：Vue CLIからViteへ移行する
前回紹介したREADMEのFeaturesとViteで生成した雛形を参照しながら移行作業を行った。
やったこと
大まかな流れは次のような感じ。
- 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が参考になった。
実際の移行作業に関するコミットはこちら
taka1156// 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()]
});
これでエリアス適用すると、@使えたのでもしよかったら試してみてください。
konnyaku256コメントありがとうございます！
こちら設定してみたら@使えるようになりました～
alias使えるの知らなかったのでとても参考になりました！
konnyaku256デプロイして動作確認
本番環境へのデプロイも無事完了。
特に問題なく動いてくれてました。
実際に公開されている私のポートフォリオサイト
CircleCIの結果
konnyaku256[ATTENTION] ホスティング先がGitHub Pagesの場合
GitHub Pagesでは標準でJekyllによって静的ファイルがホスティングされる。
Viteでは vite build すると、標準でアセットが _assets ディレクトリ以下に生成されるが、これがJekyllの制約にひっかかるらしい。
対策
公開するディレクトリ直下に空の .nojekyll ファイルを配置しておけば、Jekyllを無効にすることができる。
References