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之后选择项如下
然后我们执行下
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、以及构建过程接管。
