vite与ts的结合

搭建环境

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./src/main.ts" type="module"></script>
</head>

<body>

</body>

</html>

console.log("hello");

npm init -y #初始化工程
npm i vite -D  #安装vite
npm run dev

说明: vite天生支持ts, 我们什么都没做, 就可以运行main.ts

TS的特点就是强类型绑定, 最大的作用就是提高代码的规范性

我们将数值类型的值赋值给字符串类型的变量, 在TS中肯定是不合法的, 而且编译器也给出了提示

但是这并不影响我们运行代码, 如果我们更强制的约束, 可以引入插件帮助把语法错误直接输出到控制台

复制代码

npm install vite-plugin-checker -D

import { defineConfig } from "vite"
import check from "vite-plugin-checker"

export default defineConfig({
  plugins: [check({
    typescript: true
  })]
})

该插件依赖TS, TS也需要配置文件

复制代码

npm install typescript -D

// 配置一些ts的检查手段和规则
{
  "compilerOptions": {
    "skipLibCheck": true // 忽略对node_modules目录的检查
  }
}

重新运行项目, TS语法错误就会阻塞项目, 减少项目中的雷

由于语法错误最终打包失败, 但是在编译到错误错误之前, 还是执行了构建操作

对于大型项目, 边构建边校验这样很浪费时间, 我们希望先检验,再构建

复制代码

{
  "name": "04vite-ts",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit && vite build",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

TS中使用环境变量会有以下坑

复制代码

VITE_TARGET=http://www.baidu.com

这个报错是因为tsconfig中默认把ts编译为es3, 就不支持 import.meta属性了, 所以要配置一下

复制代码

// 配置一些ts的检查手段和规则
{
  "compilerOptions": {
    "skipLibCheck": true, // 忽略对node_modules目录的检查
    "module": "ESNext" // 编译为最新的ES语法
  }
}

又发现找不到env属性

要通过声明文件解决这个问题

复制代码

/**
 * 下面写的是 三斜线指令
 * readonly是只读的意思, 一般环境变量的值不希望被改
 */
/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_TARGET: string
}

课程中是正常了, 而且我这里编译器也通过了

但是vite.config.ts文件报错了, 是因为vite不知道去哪找资源, 模块方案配置为node后, 默认去node_modules中寻找资源

复制代码

// 配置一些ts的检查手段和规则
{
  "compilerOptions": {
    "moduleResolution": "node", // 模块解析方案
    "skipLibCheck": true, // 忽略对node_modules目录的检查
    "module": "ESNext" // 编译为最新的ES语法
  }
}