前端构建工具vite进阶系列(七) -- vite与ts、框架的结合实践

前言

vite作为下一代的打包构建工具，怎么会少的掉与现有主流框架的结合实践呢？vite也提供了几组预设：

那么我们分别用vite来创建一个Vue、React的项目吧，这里只是用vite去初始化一个项目模板，跟webpack相比，看看vite到底怎么去做结合的。

vite与vue结合实践

在分析vite与vue结合，目前只是通过npm create vite@latest命令创建，因为在新的vite脚手架里面，已经通过create-vue来集成vue3项目了，在create-vite里面也有提示，让你最好是选择create-vue的方式。

通过create vite vue的方式生成的项目目录如下：

• cd '项目路径'
• npm install
• npm run dev

在这里解决一个比较常见的问题，也就是下图所示，ts无法识别.vue文件，所以我们需要在vite-env.d.ts文件里面写上下述代码。

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

• 解决前

• 解决后

我们可以在定制脚手架的时候，把这个问题一并解决掉，这里也来展示一下.gitignore里面的配置，这个文件在git提交的时候，会忽略掉这些文件。

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

我觉得吧，学习研究一个东西，得找最好的参照，所以这个就很有必要。那我们继续来看一下关于vite.config.ts里面的配置吧。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

你没有看错，就是这么简简单单的几行，我们前面的学习也知道了，vite对大部分模块都做了开箱即用，省去了繁琐的配置，让开发者专注于业务开发，这一点跟webpack相比，就是狠赞！✨✨✨✨

vite与react结合实践

通过create vite react的方式生成的项目目录如下：

• cd '项目路径'
• npm install
• npm run dev

当你打开vite-env.d.ts文件你会看到/// <reference types="vite/client" />导入了这样的一个文件，在vue项目中也会有的，这个在前端构建工具vite进阶系列(五) -- vite的热更新(HMR)机制的实践与原理中，有提到过，这就是热更新HMR所需要的客户端，这回在客户端请求访问入口文件的时候，这段生成客户端的代码就会被执行，生成了客户端跟vite服务器通信。那我们继续来看一下关于vite.config.ts里面的配置吧。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

你也没看错，vite与react的配置也是这么简单的，当然实际开发肯定不能用vite默认的配置，这必须要根据你的团队的规范来进行定制，你也可以根据前面学的东西，进行你自己的config的定制。因为两个模板我们都使用了ts，所以我们来分析一下ts的配置。

vite与ts的结合实践

vite对ts也是开箱即用的

vite对ts也是开箱即用的

vite对ts也是开箱即用的

重要的话说三遍，下面来一起看看关于框架中ts的配置支持。

• vue的ts.config.json配置

{
  "compilerOptions": {
    "target": "ESNext", // 转换目标为ESX
    "useDefineForClassFields": true, // 使用class类字段语法，下面进行扩展
    "module": "ESNext", // 模块
    "moduleResolution": "Node", // 模块解析器
    "strict": true, // 启用所有严格类型检查选项
    "jsx": "preserve", // 在 .tsx文件里支持JSX
    "resolveJsonModule": true, // 将json视为模块，并解析成JavaScript
    "isolatedModules": true, // 将每个文件作为单独的模块
    "esModuleInterop": false, // 支持使用`import d from 'cjs'`的方式引入`commonjs`包。
    "lib": ["ESNext", "DOM"], // 编译过程中所需要引入的库
    "skipLibCheck": true, // 忽略所有的声明文件（ `*.d.ts`）的类型检查。一般指的是node_modules的包
    "noEmit": true, // 不生成输出文件。
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
// 更多配置，请查询 https://www.tslang.cn/docs/handbook/tsconfig-json.html

• react的ts.config.json配置

{
  "compilerOptions": {
    "target": "ESNext", // 转换目标为ESX
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"], // 编译过程中所需要引入的库
    "allowJs": false, // 允许编译javascript文件
    "skipLibCheck": true, // 忽略所有的声明文件（ `*.d.ts`）的类型检查。一般指的是node_modules的包
    "esModuleInterop": false, // 支持使用`import d from 'cjs'`的方式引入`commonjs`包。
    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入。仅为了类型检查。
    "strict": true, // 启用所有严格类型检查选项
    "forceConsistentCasingInFileNames": true, // 禁止对同一个文件的不一致的引用。
    "module": "ESNext", // 模块
    "moduleResolution": "Node", // 模块解析器
    "resolveJsonModule": true, // 将json视为模块，并解析成JavaScript
    "isolatedModules": true, // 将每个文件作为单独的模块
    "noEmit": true, // 不生成输出文件。
    "jsx": "react-jsx" // 在 .tsx文件里支持JSX
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
// 更多配置，请查询 https://www.tslang.cn/docs/handbook/tsconfig-json.html

关于useDefineForClassFields配置项

关于这个配置，我们举例说明。在 TypeScript 中，我们可以使用类来定义一个对象，这个对象有一些属性和方法。当我们使用类来定义一个对象时，我们可以在类的内部使用成员变量来定义这个对象的属性。

在 TypeScript 中，我们有两种方式来定义类成员变量：

1. 对象属性赋值语法：

class MyClass {
  myProperty: string;
  constructor() {
    this.myProperty = 'hello';
  }
}

在这个例子中，我们使用 this.myProperty 的方式在构造函数中为类成员变量赋值。这种方式被称为对象属性赋值语法。

1. 类字段语法：

class MyClass {
  myProperty = 'hello';
}

在这个例子中，我们直接将赋值语句放在了类成员变量的声明处，这种方式被称为类字段语法。

这两种方式本质上是一样的，都可以用来定义类成员变量。但是，在编译成 JavaScript 代码的时候，它们的编译结果是不同的。

默认情况下，TypeScript 编译器会将类成员变量的定义和赋值分离，使用对象属性赋值语法来实现类成员变量的初始化。也就是说，上面的对象属性赋值语法在编译成JavaScript代码后，会变成这样：

var MyClass = /** @class */ (function () {
  function MyClass() {
    this.myProperty = 'hello';
  }
  return MyClass;
}());

使用类字段语法可以让代码更加简洁和易读，同时也可以在一定程度上提高编译性能。但需要注意的是，类字段语法需要目标环境支持 ES6+ 的类字段语法，因此不适用于所有的应用场景。

ts静态类型检查落实到项目中

在企业项目开发中，我们可以利用ts静态类型检查来处理一些我们没有get到的错误，这里举了一个很简单的例子，比如ts报错的时候，一般都应该去修复报错，但是会有一些开发者不去关注这个东西，这里我们应当对自己写的代码有追求，所以用vite-plugin-checker插件来限制用户，报错之后阻塞开发，所以开发者不得不去解决报错才行。

export let a: string = '1' // 声明a变量，类型为string
a = 1 // 赋值number，必定会报错

此时的页面：

我们可以看到页面。即使报错了，但是不影响页面，在没有codeReview的团队里面，这就是代码隐患。你可能会说，这有什么，又不影响开发，是真的吗？假如我们再改造一下代码，变成下面这样：

export const a = function(params:string){
  // 做了很多处理...
  return res;
}

a('一溪之石').split('')

在开发环境，肯定我们hold到的case只是返回了string类型的res，它里面的处理，可能返回了number或者其他类型，那么就不能调用split方法了，后面代码直接报错，接着上面的来讲，如果不去修改这个东西，那么上生产环境，必定会崩掉。所以要做的就是给开发者一个阻塞页面的提示。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),checker({typescript:true})],
})

此时的页面：

对于开发者而言，你不去修改这些东西，那你的开发将走不下去。

在vite中对ts文件，只是做了编译，并没有做类型检查，如果我们想要更进一步的去阻止ts报错，生成文件的话，可以用tsc --noEmit实现。

• 使用：

{
  "scripts":{
    "dev":"vite"
    "build": "tsc --noEmit && vite build",
  }
}

• 修改错误前，没生成dist目录：

• 修改错误后，生成了dist目录：

关于环境变量的声明

在前期我们讲了.env文件中的环境变量配置，在import.meta.env中可以使用

// 新建.env文件写入
VITE_PROXY_TARGET = https://api.com/

但是vite中并没有语法提示： 对此需要在vite-env.d.ts中，声明一下ImportMetaEnv接口。

interface ImportMetaEnv { // vite读到此文件的时候，就会与默认的ImportMetaEnv合并
  VITE_PROXY_TARGET:string 
}

此时就可以有语法提示了：

总结

vite对vue和react结合分别有对应的插件处理，它内部做了很多事情，以至于开发者用默认的配置就可以结合框架启动一个本地项目，vite对开发者来讲，你可以视为一个盲盒，因为他里面做的东西是真的太多了。上面我们也讲了与ts的相关的东西，在某些方面或许对你有用。🚀 🚀 🚀 🚀， 下一章 >>> 前端构建工具vite进阶系列(八) -- vite本地服务器、esbuild、rollup以及跨域的处理