vite的使用

原生里使用 ES6模块化导入

• 目前google浏览器, 已经支持了 export 和 import导入和导出了

但是有一个缺点:

• 某些文件是不识别的 (.ts, .vue, .less, .jsx)

• 如果包之间依赖太多, 那么会发送过多的网络请求;

这些缺点可以通过 vite来解决

vite

vite安装

• npm install vite –g # 全局安装

• npm install vite –D # 局部安装

• 局部安装启动命令:

• npx vite

vite处理css , sass , postcss的转换

vite可以直接支持css的处理

vite处理sass

• npm install sass -D

vite处理postcss;

• 只需要安装postcss，并且配置 postcss.config.js 的配置文件即可；

• npm install postcss postcss-preset-env -D

vite处理 TypeScript

vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译：

• 只需要直接导入即可；

如果我们查看浏览器中的请求，会发现请求的依然是ts的代码：

• 这是因为vite中的服务器Connect会对我们的请求进行转发；

• 获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析；

注意：在vite2中，已经不再使用Koa了，而是使用Connect来搭建的服务器

vite处理 vue

先安装vue

• npm install vue@next

vite对vue提供第一优先级支持：

• Vue 3 单文件组件支持：@vitejs/plugin-vue

• Vue 3 JSX 支持：@vitejs/plugin-vue-jsx

• Vue 2 支持：underfin/vite-plugin-vue2

安装支持vue的插件：

• npm install @vitejs/plugin-vue -D

在vite.config.js中配置插件：

报错缺少插件

因为 .vue文件 需要依赖这个插件来编译template标签

• npm install @vue/compiler-sfc -D

vite 打包

npx vite build

vite原理:

• vite1: 使用的是 koa

• vite2: 使用的是 Connext; Connext更加是个转发

请求服务器 --> 获取自己的代码 --> Connext拦截 -->vite工具处理成 es6.js代码---> Connext转发--->发送给浏览器

原文：https://www.cnblogs.com/cl1998/p/15311813.html