插件

Vite会在生命周期的不同阶段调用不同的插件以达到不同的目的。

vite-aliases插件

作用

vite-aliases插件可以帮我们自动生成别名：帮我们检测src下的目录并生成别名，省去了自己配置alias的繁琐过程。

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { ViteAliases } from 'vite-aliases'
export default defineConfig(({ command, mode }) => {
  return {
    // resolve:{
    //   alias:{
    //     "@":path.resolve(__dirname,"./src"),//用@符号表示src目录
    //     "@assets":path.resolve(__dirname,"./src/assets")
    //   }
    // }
    plugins:[
      ViteAliases()
    ]
  }
});

原理

Vite插件必须返回给Vite一个配置对象，我们一般封装为一个函数，有利于代码的拓展性。
vite-aliases插件在vite的config生命周期中执行，如果我们想自己开发一个插件就可以使用config生命周期。
其原理大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//MyPlugins/MyViteAliases.js
const path = require("path")
const fs = require("fs")
function getSrcDir(){
    let dirs = []
    let files = []
    let result = fs.readdirSync(path.resolve(__dirname,'../src'))
    result.forEach(item=>{
        let state = fs.statSync(path.resolve(__dirname,"../src"))
        if(state.isDirectory){
            dirs.push(item)
        }else{
            files.push(item)
        }
    })
    return {
        dirs,
        files
    }
}
export default function MyViteAliases(){
    let res = getSrcDir()
    let opt={}
    res.dirs.forEach(dir=>{
        opt[`@${dir}`]=path.resolve(__dirname,'../src'+'/',dir).replace(/\\/g, '/')
    })
    return {
        //该函数允许返回部分的viteconfig的配置内容
        //其原理相当于使用了Object.assign()对对象进行了合并
        config:function(config,env){
            //config：当前的配置
            //env：当前的运行环境
            return {
                resolve:{
                    alias:opt
                }
            }
        }
    }
}

vite-plugin-mock插件

作用

vite-plugin-mock插件使用了mock.js，用于帮我们创建数据模拟后端返回内容。

原理

Vite插件必须返回给Vite一个配置对象，我们一般封装为一个函数，有利于代码的拓展性。
vite-plugin-mock插件在Vite的configureServer生命周期中执行，在生命周期钩子中可以拿到vite-server服务器相关的配置。
我们可以使用服务器配置的中间件上对请求和响应数据进行处理。
其原理大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const path = require("path");
const fs = require("fs");
export default function (options = {}) {
  return {
    configureServer(server) {
      let mockRes = {};
      let fileStat = fs.statSync(path.resolve("./mock"));
      if (fileStat.isDirectory()) {
        mockRes = require(path.resolve(process.cwd(), "mock/index.js"));
      }
      server.middlewares.use((req, res, next) => {
        let mockItem = mockRes.find((item) => item.url === req.url);
        if (mockItem) {
          let responseData = mockItem.response(req);
          res.setHeader("Content-Type", "application/json");
          res.end(JSON.stringify(responseData)); //这个操作是异步的，所以next()要写在else里面
        }
        {
          next();
        }
      });
    },
  };
}

vite-plugin-checker插件

作用

Vite天生支持typescript，但是vite只会编译ts文件但是不会进行类型检查，我们可以配合vite-plugin-checker对项目中的typescript语法进行约束。

操作方法

1、安装vite-plugin-checker

1
npm install vite-plugin-checker

2、在vite.config.js中启用这个插件

1
2
3
4
5
6
7
8
9
10
import checker from "vite-plugin-checker"
export default defineConfig(({ command, mode }) => {
  return {
    plugins:[
      checker({
        typescript:true
      })
    ]
  }
});

注意，这个时候运行会报错，因为没有创建tsconfig.json文件或文件中无内容。
3、创建tsconfig.json文件

1
2
3
4
5
6
7
{
    "compilerOptions": {
        "skipLibCheck": true // 跳过依赖包的检查
    },
    "include": ["**/*"],
    "exclude": []
}

4、修改package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "dependencies": {
    "axios": "^1.7.7",
    "less": "^4.2.0",
    "typescript": "^5.7.2",
    "vite": "^5.4.3",
    "vite-plugin-checker": "^0.8.0"
  },
  "scripts": {
    "dev": "tsc --noEmit && vite", //这个操作表示如果tsc --noEmit执行不成功就跳过vite命令
    "build": "vite build"
  }
}