原生里使用 ES6模块化导入

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

vite的使用_服务器

vite的使用_服务器_02

但是有一个缺点:

  • 某些文件是不识别的 (.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的使用_typescript_03

vite处理postcss;

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

  • npm install postcss postcss-preset-env -D

vite的使用_typescript_04

vite处理 TypeScript

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

  • 只需要直接导入即可；

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

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

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

vite的使用_网络请求_05

注意：在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中配置插件：

vite的使用_css_06

报错缺少插件

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

vite的使用_网络请求_07

  • npm install @vue/compiler-sfc -D

vite的使用_typescript_08

vite 打包

npx vite build

vite原理:

  • vite1: 使用的是 koa

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

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

vite的使用_css_09