title: vite+ts+vue3項目構(gòu)建
date: 2022-06-09
description: vite+ts+vue3項目構(gòu)建的踩坑和補充

開始

之前的項目是基于vue-cli搭建的，最近想嘗試下vite搭建的項目和開發(fā)體驗，所以在這里我們將簡單的記錄下構(gòu)建的過程，以及在這些過程中出現(xiàn)的問題

基礎(chǔ)架子構(gòu)建

通過Vite中文網(wǎng)的搭建教程，我們可以清晰的知道如何創(chuàng)建一個vue+ts項目

我們這里使用yarn

yarn create vite my-project --template vue-ts

cd my-project
yarn
yarn dev

至此，我們基于vite的vue3+ts的基礎(chǔ)項目就生成了

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"),
        },
    }
});

相關(guān)鏈接

Sass|Scss

Css預(yù)處理器，在項目中使用的Scss
首先得安裝對應(yīng)的預(yù)處理器依賴

yarn add sass --dev

項目中我們還會給預(yù)處理器傳遞一些配置項，比如全聚注入的變量、方法之類的，在這里配置如下

//vite.config.ts
export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '@/styles/mixins', '@/styles/variables';`
      }
    }
  }
})

ESLint

作為質(zhì)量把控的其中一道門檻，我們在項目中選擇eslint

如何配置eslint呢

yarn add eslint --dev
yarn create @eslint/config

執(zhí)行yarn create @eslint/config之后選擇項如下

eslint.png

然后我們執(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是搭建好了，我們想在運行中進行錯誤的提示，這明顯還差一步

方法一

因為vite和rollup在一些插件上面可以兼容使用，我們針對ESLint的插件剛好在此列，
如何查詢呢？可以在這里找到兼容的插件列表和一些其他基于vite的有關(guān)的東西

我們通過上面的地址可以知道@rollup/plugin-eslint是我們的目標，只需要

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é)

總體上來說，改動并不是特別大。體驗也很好。

本來說還有typescript的類型檢查也要運行時檢測的，看了下文檔，說的是Vite天然支持ts,Vite僅執(zhí)行.ts文件的轉(zhuǎn)譯工作，并不執(zhí)行任何類型檢查。Vite使用esbuild將TypeScript轉(zhuǎn)譯到JavaScript，約是tsc速度的 20~30 倍，同時HMR更新反映到瀏覽器的時間小于50ms。擁有更好的體驗，所以將類型檢查在開發(fā)階段默認交給IDE、以及構(gòu)建過程接管。