Vite 基础之 Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置

一、Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置

1. 在 vite 中，对于 ts 只编译不校验。如果需要对 ts 校验，只能使用 tsc。通过 tsc --noEmit 命令，对 ts 只校验不把编译文件做输出，如下所示：

• 通过 yarn add typescript 命令添加 typescript
• 新增 tsconfig.json，代码如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

• 修改 package.json，将 build 的命令添加 tsc --noEmit，代码如下：

{
  "name": "vite-vue3",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "vite": "^2.9.7"
  }
}

• 通过 npm run build 命令，就可以看到 ts 的校验

2. 如果 vite 需要对 vue-tsc SFC 的支持，需要通过 yarn add vue-tsc 命令添加，然后修改 package.json 中的 build 命令，最后 npm run build，package.json，代码如下：

{
  "name": "vite-vue3",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "vite": "^2.9.7"
  }
}

3. 在 vite 中，esbuild 默认只能对单文件的 ts 进行编译，不能对多个文件、多个模块的 ts 一起编译，需要修改 tsconfig.json 配置文件，设置 isolatedModules 为 true，tsconfig.json，代码如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "isolatedModules": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

4. 对于 isolatedModules 的作用，如下所示：

• Exports of Non-Value Identifiers
• Non-Module Files
• Peferences to const enum members

5. 在 vite 中，增加 vite/client 配置，可以知道 vite 内部支持的变量和类型，修改 tsconfig.json，代码如下:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client"],
    "isolatedModules": true,
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

6. 对于 client types，如下所示：

• Asset imports，import 的静态文件返回的类型
• env，环境变量
• HMR API，.hot 文件的 API

7. Vite 对于静态文件的处理，提供了多个 types 去引入静态文件，如下所示：

• url，文件放在某一个地方，然后返回一个 url，如 import test from './test?url;'
• raw，把字符串的内容返回回来，如 import test from './test?raw;'
• worker / worker inline，用于 web worker，如 import Worker from './worker?worker;'

8. 对于 vite 中集成 eslint 和 prettier，如下所示：

• 通过 yarn add eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D 命令下载相关依赖
• 新建 .eslintrc.js，代码如下：

module.exports = {
  extends: 'standard',
  globals: {
    postMessage: true
  },
  rules: {
    'space-before-function-paren': 'off'
  }
};

• 新建 .prettierrc，代码如下：

{
  "semi": false,
  "singleQuote": true
}

• 修改 package.json 中的 build 和 lint，代码如下：

{
  "name": "vite-vue3",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "npm run lint && vue-tsc --noEmit && tsc --noEmit && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext js src/"
  },
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.1",
    "vite": "^2.9.7"
  }
}

9. 在 vite 项目中，建立 husky 代码规范，如下所示：

• 通过 yarn add husky -D 命令下载依赖
• 通过 npx husky install 命令初始化
• 通过 npx husky add .husky/pre-commit "npm run lint" 命令添加校验

10. 在 vite 中使用环境变量，可以用 import.meta.env，有四种环境变量，如下所示：

• MODE，用来指明现在所处于的模式，一般通过它进行不同环境的区分，比如 dev、test、pre、prd 等等
• BASE_URL，用来请求静态资源初始的 url
• PROD，用来判断当前环境是否是正式环境
• DEV，用来与 PROD 相反的环境
• SSR，用来判断是否是服务端渲染的环境

11. 对于 Production Replacement，可以通过不同的 .env 文件，通过 import.meta.env 来获取到当前的环境，如下所示：

• 新建 .env.development 文件，代码如下：

VITE_AAA=yyy

• 在 main.ts 中，打印 import.meta.env，代码如下：

import './style.css'

console.log(import.meta.env, import.meta.env.VITE_AAA);

const app = document.querySelector<HTMLDivElement>('#app')!

app.innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`

• 通过修改 package.json 中的 dev，可以让 vite 项目以不同的环境运行，新建 .env.test，package.json，代码如下：

{
  "name": "vite-env",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --mode test",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^4.5.4",
    "vite": "^2.9.9"
  }
}

• 在 src 目录下，会多一个 vite-env.d.ts 文件，进行声明，会自动把类型添加到 vite 提供的 import.meta.env 上，代码如下：

/// <reference types="vite/client" />
interface ImportMetaEnv {
  VITE_TITLE: string;
}