脚本宝典收集整理的这篇文章主要介绍了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原理:

• vite1: 使用的是 koa

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的vite的使用全部内容，希望文章能够帮你解决vite的使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。