title: vite+ts+vue3項(xiàng)目構(gòu)建
date: 2022-06-09
description: vite+ts+vue3項(xiàng)目構(gòu)建的踩坑和補(bǔ)充
開始
之前的項(xiàng)目是基于vue-cli搭建的，最近想嘗試下vite搭建的項(xiàng)目和開發(fā)體驗(yàn)危彩，所以在這里我們將簡單的記錄下構(gòu)建的過程敛摘，以及在這些過程中出現(xiàn)的問題
基礎(chǔ)架子構(gòu)建
通過Vite中文網(wǎng)的搭建教程悲龟，我們可以清晰的知道如何創(chuàng)建一個vue+ts項(xiàng)目
我們這里使用yarn
yarn create vite my-project --template vue-ts
cd my-project
yarn
yarn dev
至此采转，我們基于vite的vue3+ts的基礎(chǔ)項(xiàng)目就生成了
vite.config.ts
alias
別名受扳，在vue-cli中我們可以自定義別名鞋真，那在vite中如何定義呢
//vite.config.ts
import path from "path"
function resolve(dir) {
return path.resolve(__dirname, dir);
}
export default defineConfig({
...
resolve: {
alias: {
"@": resolve("src/"),
"@core": resolve("src/components"),
services: resolve("src/services"),
},
}
});
Sass|Scss
Css預(yù)處理器均函，在項(xiàng)目中使用的Scss
首先得安裝對應(yīng)的預(yù)處理器依賴
yarn add sass --dev
項(xiàng)目中我們還會給預(yù)處理器傳遞一些配置項(xiàng)，比如全聚注入的變量虚青、方法之類的它呀，在這里配置如下
//vite.config.ts
export default defineConfig({
...
css: {
preprocessorOptions: {
scss: {
additionalData: `@import '@/styles/mixins', '@/styles/variables';`
}
}
}
})
ESLint
作為質(zhì)量把控的其中一道門檻，我們在項(xiàng)目中選擇eslint
如何配置eslint呢
yarn add eslint --dev
yarn create @eslint/config
執(zhí)行yarn create @eslint/config之后選擇項(xiàng)如下
然后我們執(zhí)行下
yarn add -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
然后我們再來簡單看下：
首先是eslint-plugin-vue
這是Vue.js的官方ESLint插件棒厘，這個插件允許我們檢查.vue文件中的template和script中的代碼和js中的代碼纵穿；
其次是typescript相關(guān)的ESLint插件
@typescript-eslint/eslint-plugin 和 @typescript-eslint/parser。
通過eslint-plugin-vue文檔中的安裝和配置介紹奢人，我們的配置文件大概如下
如果出現(xiàn)defineProps之類的no-undef warnings QA在此
// .eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"node": true,
"vue/setup-compiler-macros": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": 2020,
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"vue",
"@typescript-eslint"
],
"rules": {
}
}
ESLint是搭建好了谓媒，我們想在運(yùn)行中進(jìn)行錯誤的提示，這明顯還差一步
方法一
因?yàn)?code>vite和rollup在一些插件上面可以兼容使用何乎，我們針對ESLint的插件剛好在此列句惯，
如何查詢呢土辩？可以在這里找到兼容的插件列表和一些其他基于vite的有關(guān)的東西
我們通過上面的地址可以知道@rollup/plugin-eslint是我們的目標(biāo)，只需要
yarn add -D @rollup/plugin-eslint
我們就可以得到插件
然后在vite.config.ts中增加對應(yīng)的plugins就可以了
//vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslint from "@rollup/plugin-eslint";
import path from "path";
export default defineConfig({
plugins: [
vue(),
{
...eslint({
include: "**/*.+(vue|js|jsx|ts|tsx)",
}),
enforce: "pre",
}
],
...
});
方法二
基于vite的plugin也是有的抢野，我們也可以選擇這類的插件去完成ESLint檢查功能
//vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslint from "vite-plugin-eslint";
import path from "path";
export default defineConfig({
plugins: [
vue(),
eslint()
],
...
});
總結(jié)
總體上來說拷淘，改動并不是特別大。體驗(yàn)也很好指孤。
本來說還有typescript的類型檢查也要運(yùn)行時檢測的启涯，看了下文檔，說的是Vite天然支持ts,Vite僅執(zhí)行.ts文件的轉(zhuǎn)譯工作恃轩，并不執(zhí)行任何類型檢查结洼。Vite使用esbuild將TypeScript轉(zhuǎn)譯到JavaScript，約是tsc速度的 20~30 倍叉跛，同時HMR更新反映到瀏覽器的時間小于50ms补君。擁有更好的體驗(yàn)，所以將類型檢查在開發(fā)階段默認(rèn)交給IDE昧互、以及構(gòu)建過程接管。
