注意: vite 2 はまだ beta版なので，公式ページ にて最新の情報をチェックしてください．
記事作成時点での最新バージョンは 2.0.0-beta.50 です．
記事更新時点での最新バージョンは 2.1.3 です．
概要
- Vite 入門
-
Vite 2 + TypeScript で
import '@/hoge'のようなパスエイリアスを使いたい
Vite とは
Vue.js 作者の Evan You が夜中に思いついたアイデアをうっかり朝までに完成させてしまったフロントエンドビルドツール1
As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant.
— Evan You (@youyuxi) 2020年4月20日
ホットリロード（HMR）がめちゃくちゃ速いことで有名で，ついでにビルドも esbuild 並に高速23（というかビルドは内部で esbuild rollup を使っているのでそれはそう）
他にも，Lazy Components のコード分割にデフォルトで対応していたり，vue-cli に代わって「Vue ならとりあえずこれ」感が出てきています．
それだけでなく，React もこれでいいかもしれません．
Vite を使う以前は vue-cli に不満などありませんでしたが，一度 Vite の HMR を体感してしまった今となっては，webpack には戻れないと感じています．
公式サイト：https://vitejs.dev
Vite init
まずプロジェクトテンプレート4 のインストールです
npm init @vitejs/app --template vue-ts your-project-name
# Or
yarn create @vitejs/app --template vue-ts your-project-name
VSCode の設定
拡張機能を入れます
-
Vetur -
VueDX
(2021年3月29日 編集) VueDX が使われなくなり（ac04ebe）型チェックには代わりに vue-tsc を用いるようになっていました（b3b3c01）
またそれに伴い，vue-tsc がデフォルトの TypeScript server になっている VSCode 拡張 Volar が Vetur と並んで推奨されるようになりました（79dd32c）
Volar は Vetur より軽快な感じがしますが，vue-tsc の型チェックはおよそ 10秒ほどで特に vuedx-typecheck との差は感じませんでした．
Vite+Vue3 でやるとき、VueDX+tsc+Vetur だと shims-vue.d.ts が必要だったのですが、vue-tsc+Volar だと不要になってやや嬉しいです。
— u-sho (@u_sho_engineer) March 27, 2021
ただし、Vetur のフォーマットが使えなくなるので ESLint だけでなく Prettier を追加する必要があるかもです。
{
"recommendations": [
- "octref.vetur",
- "znck.vue-language-features"
+ "johnsoncodehk.volar"
],
+ "unwantedRecommendations": [
+ "octref.vetur",
+ "znck.vue-language-features"
+ ]
}
TypeScript の設定
tsconfig.json を少しだけ書き換えます．
特に esModuleInterop は設定推奨です．React を使うとき特に便利です．
（参考：https://www.typescriptlang.org/ja/tsconfig#esModuleInterop）
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+ "newLine": "lf",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"lib": ["esnext", "dom"],
"types": ["vite/client"],
- "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+ "exclude": ["node_modules"]
}
パスエイリアスの設定
本題．
@/ から始まるパスを ./src/ のエイリアスとして設定する
import HelloWorld from '../../components/HelloWorld.vue'
// って書くより
import HelloWorld from '@/components/HelloWorld.vue'
// って書きたい！
まず TypeScript の方にエイリアスを設定します．
（参考：https://www.typescriptlang.org/ja/tsconfig#paths）
これで，*.vue（や *.tsx）ファイルではエイリアスが効くようになります．
{
"compilerOptions": {
- "root": true,
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["src/*"],
+ // 追加するならこんな感じ。@ はじまりでなくても良い
+ // "c/*": ["src/components/*"]
+ },
"target": "esnext",
"module": "esnext",
次に Vite の方に設定します．
（参考：https://vitejs.dev/config/#alias）
これで src/main.ts などでもエイリアスが効くようになります (*' '*)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
+ alias: [
+ {
+ find: '@/',
+ replacement: `./src/`
+ },
+ // {
+ // find: 'c/',
+ // replacement: `./src/components/`
+ // }
+ ],
plugins: [vue()]
})
おまけ（ESLint ルールで矯正する）
せっかく @/* で書けるようになったのに，それに気づかずに相対パスで書いてしまう人もいるかもしれません．ESLint ルールでパスエイリアスを使うように強制（矯正）してしまいましょう．
まずは ESLint のインストールです．
以下のコマンドで設定まで含めてインタラクティブにやってくれます．
npm i -D eslint
# Or
# yarn add -D eslint
npx eslint --init
# Or
# yarn eslint --init
そして，無限ループ等が起こらないように ignorePatterns を設定します．
（参考：nuxt-ts のビルドが終わらない or 重い - Qiita @u-sho ）
{
+ "ignorePatterns": [
+ ".git",
+ "node_modules",
+ "dist",
+ "package-lock.json",
+ "yarn.lock.json"
+ ],
+
"root": "true",
"parser": "vue-eslint-parser",
続いてルールの設定です．
（参考：https://eslint.org/docs/rules/no-restricted-imports）
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"@vue/typescript"
],
"rules": {
+ "no-restricted-imports": [
+ "error",
+ {
+ "patterns": [
+ "../*",
+ "./assets/*",
+ "./components/*",
+ // "@/components/*",
+ "./pages/*"
+ ]
+ }
+ ],
これで
import HelloWorld from '../../components/HelloWorld.vue'
はエラーを吐くようになりました．
まとめ
以下をよく読みましょう．
- TSConfig リファレンス
- Vite2 Config
- ESLint rule
no-restricted-imports