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

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

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

浏览器支持 esmodule

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

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

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

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

这个时候打开 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 中已内置处理，配置更为简单。

	webpack	vite
css	css-loader	-
less	less-loader、less	less
postcss	postcss-loader、plugin 如 pocss-preset-env	postcss-preset-env

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

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

typescript

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

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

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

通过 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);

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

jsx

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

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

vite.config.js

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

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

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

打包指令

• 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 编译资源 的介绍， 更多有关 前端、工程化 的内容可以参考我其它的博文，持续更新中~