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