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

一、Vite 软件定制开发供应商基础应用的 vite 中使用 、软件定制开发供应商处理静态资源的方法、集成 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"]}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 修改 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"  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 通过 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"  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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"]}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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"]}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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'  }};
1
2
3
4
5
6
7
8
9

• 新建 .prettierrc，代码如下：

{  "semi": false,  "singleQuote": true}
1
2
3
4

• 修改 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"  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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
1

• 在 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>`
1
2
3
4
5
6
7
8
9
10

• 通过修改 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"  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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