vite+ts+vue3项目构建

title: vite+ts+vue3项目构建
date: 2022-06-09
description: vite+ts+vue3项目构建的踩坑和补充

开始

之前的项目是基于vue-cli搭建的，最近想尝试下vite搭建的项目和开发体验，所以在这里我们将简单的记录下构建的过程，以及在这些过程中出现的问题

基础架子构建

通过Vite中文网的搭建教程，我们可以清晰的知道如何创建一个vue+ts项目

我们这里使用yarn

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

cd my-project
yarn
yarn dev

至此，我们基于vite的vue3+ts的基础项目就生成了

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预处理器，在项目中使用的Scss
首先得安装对应的预处理器依赖

yarn add sass --dev

项目中我们还会给预处理器传递一些配置项，比如全聚注入的变量、方法之类的，在这里配置如下

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

ESLint

作为质量把控的其中一道门槛，我们在项目中选择eslint

如何配置eslint呢

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

执行yarn create @eslint/config之后选择项如下

eslint.png

然后我们执行下

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相关的ESLint插件
@typescript-eslint/eslint-plugin 和 @typescript-eslint/parser。
通过eslint-plugin-vue文档中的安装和配置介绍，我们的配置文件大概如下

如果出现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的有关的东西

我们通过上面的地址可以知道@rollup/plugin-eslint是我们的目标，只需要

yarn add -D @rollup/plugin-eslint

我们就可以得到插件

然后在vite.config.ts中增加对应的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()
    ],
    ...
});

总结

总体上来说，改动并不是特别大。体验也很好。

本来说还有typescript的类型检查也要运行时检测的，看了下文档，说的是Vite天然支持ts,Vite仅执行.ts文件的转译工作，并不执行任何类型检查。Vite使用esbuild将TypeScript转译到JavaScript，约是tsc速度的 20~30 倍，同时HMR更新反映到浏览器的时间小于50ms。拥有更好的体验，所以将类型检查在开发阶段默认交给IDE、以及构建过程接管。