vite — 超快且方便的编译工具

我们编写的代码，比如 ES6、 TypeScript、react等是不能被浏览器直接识别的，需要通过 webpack、rollup这样的构建工具来对代码进行转换、编译。

但随着项目越来越大，需要处理的资源越来越多，构建工具也需要很长的时间才能开启服务，因此产生了新型的前端构建工具 Vite，可以提升编译速度和减少构建配置。

浏览器支持 esmodule

vite基于 esmodule来对资源进行处理，浏览器本身已支持 esmodule，html 文件引入 js 资源时，增加一个 type 类型即可。

<script src="./src/index.jsx" type="module">script>
1

某些第三方库也有模块化的版本，比如 lodash，浏览器可直接支持 lodash-es，在 src/index.js 从 node_modules 中引入。

import _ from '../node_modules/lodash-es/lodash.js';
console.log(_.join(','));
1
2

这个时候打开 html 页面，我们会发现 lodash.js 资源加载后，还发送了很多其它的 js 请求

直接使用浏览器支持的模块化，一方面请求资源非常多，另一方面如果不支持 esmodule的库在浏览器运行就直接报错了。

如何处理资源

当存在浏览器所不能识别的资源时，vite首先通过 connect处理成 esmodule的内容，比如 index.ts 处理成 index.js，当请求 index.ts 文件的时候，重定向到已处理好支持 esmodule的 index.js 文件上。

ES6、TS 、React 等资源都是通过 ESBuild来处理的，它类似 babel工具，但是它具有更快的编译速度，因为是使用 Go语言编写，无需经过字节码，可直接转换成机器代码。

vite 无需配置就能处理资源

使用 vite和 webpack一样，都需要全局或者项目安装依赖。

css

无论是 css、less还是处理兼容性的 postcss，在 webpack中都是需要借助合适的 loader来对资源进行处理的，而 vite中已内置处理，配置更为简单。

postcss处理兼容性的配置需要在 postcss.config.js中定义

module.exports = {
  plugins: [require('postcss-preset-env')],
};
1
2
3

typescript

ts 代码也是不需要 loader或者 plugin来处理的，只需要安装 typescript

创建 ts 文件，将资源引入到入口 js 文件中

const mul = (a: number, b: number) => {
  return a * b;
};
console.log(mul(6, 8));
1
2
3
4

通过 vite 开启服务，200ms 就开启，并且内置热更新

媒体资源

图片类资源在 webpack中需要通过 url-loader、file-loader或者配置 asset module type来处理，在 vite中，无需做任何配置，直接引入即可。

import cat from './image/cat.jpg';
const img = document.createElement('img');
img.src = cat;
img.width = 300;
document.body.appendChild(img);
1
2
3
4
5

在浏览器页面上就可以直接看到效果

jsx

react代码也可以被 vite识别，但需要后缀使用 jsx，入口文件 index.js 改为 index.jsx，并修改 html 页面的引入。

<script src="./src/index.jsx" type="module">script>
1

vite.config.js

虽然以上场景 vite都已经内置处理功能，但配置文件也不是完全用不到的，默认配置文件名 vite.config.js，比如对于 vue 的处理。

import { createVuePlugin } from 'vite-plugin-vue2';
export default {
  plugins: [createVuePlugin()],
};
1
2
3
4

新增依赖被压缩会进行提示

打包指令

• npx vite 开启本地服务，内置了热更新
• npx vite build 生成编译文件
• npx vite preview 预览编译后的文件

创建 vite 项目

以上将 vite作为工具来处理资源，还可以直接通过 vite创建关于 react或者 vue的脚手架。执行 npm init vite选择需要的项目

创建完成后，通过 npm install安装所需要的依赖，然后在 package.json中查看指令，就可以启动啦~

总结

• vite 基于 esmodule 来处理数据，使用到工具 ESBuild，编译速度非常快
• css、less、typescript、react 在 vite 中可以直接使用
• 默认配置文件 vite.config.js 可添加其它配置，如 plugin
• vite 提供了编译后预览的指令 npx vite preview

以上就是 vite 编译资源的介绍， 更多有关 前端、工程化的内容可以参考我其它的博文，持续更新中~