Vue3_02(vite)

浏览器原生支持模块化

#index.html
<script src="./src/main.js" type="module"></script>

#main.js 可以使用 import导入
 import {sum} from './js/math.js'

但是如果我们不借助于其他工具，直接使用ES Module来开发有什么问题呢？

首先，我们会发现在使用loadash时，加载了上百个模块的js代码，对于浏览器发送请求是巨大的消耗；
其次，我们的代码中如果有TypeScript、less、vue等代码时，浏览器并不能直接识别；

Vite的安装和使用

#安装
npm install vite –g # 全局安装
npm install vite –D # 局部安装
#启动
npx vite

vite可以直接支持css的处理

vite可以直接支持css的处理

　　直接导入css即可；
vite可以直接支持css预处理器，比如less
　　直接导入less；
　　之后安装less编译器；
vite直接支持postcss的转换：
　　只需要安装postcss，并且配置 postcss.config.js 的配置文件即可；

npm install less -D
npm install postcss postcss-preset-env -D

Vite对TypeScript的支持

vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译，只需要直接导入即可；

ESBuild的特点：
　　超快的构建速度，并且不需要缓存；
　　支持ES6和CommonJS的模块化；
　　支持ES6的Tree Shaking；
　　支持Go、JavaScript的API；
　　支持TypeScript、JSX等语法编译；
　　支持SourceMap；
　　支持代码压缩；
　　支持扩展其他插件；

Vite对vue的支持

vite对vue提供第一优先级支持：
　　Vue 3 单文件组件支持：@vitejs/plugin-vue
　　Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
　　Vue 2 支持：underfin/vite-plugin-vue2

#安装
npm install @vitejs/plugin-vue -D

#vite.config.js
import vue from '@vitejs/plugin-vue'

module.exports = {
  plugins: [vue()]
}

#打包
npx vite build
#打包后代码预览
npx vite preview