这是我参与「第四届青训营 」笔记创作活动的的第14天。
今天我们介绍一个Web开发构建工具 Vite
如果有兴趣，可以看看我之前的文章：红包算法之如何助你抢到大红包 | 青训营笔记 - 掘金 (juejin.cn)。
什么是Vite
Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。
Vite具有以下特点：
- 快速的冷启动
- 即时热模块更新（HMR，Hot Module Replacement）
- 真正按需编译
Vite 的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server 等等。Vite 和传统构建工具的区别，如下所示：
- High Level API
- 不包含自己编译能力
- 完全基于 ESM 加载方式的开发时
使用 Vite
通过 yarn add vite-plugin-vue2 -D 命令下载 vite-plugin-vue2 插件，通过 npm install vue@2.6.14 -S 命令下载 vue，新建 vite.config.js 文件，代码如下：
import { createVuePlugin } from "vite-plugin-vue2";
export default {
plugins: [createVuePlugin()],
};
新建 src 目录，将 main.js 移入 src 中，修改 index.html 中 main.js 的引入路径，新建 App.vue 并引入到 main.js 中，main.js 如下：
import Vue from "vue";
import App from "./App.vue";
new Vue({
el: '#app',
render: (h) => h(App),
}).$mount();
项目创建好了以后，Vite提供用npm或者yarn来生成项目结构的方式。选择一个目录，打开命令提示窗口，依次执行下面的命令构建脚手架项目，并启动项目。
npm init vite-app {#project-name}
cd {#project-name}
npm install
npm run dev
如果使用yarn，则依次执行下面的命令：
yarn create vite-app {#project-name}
cd {#project-name}
yarn
yarn dev
与Vue CLI的不同
Vue CLI 的特点
Vue 开发者应该无人不知 Vue CLI，他是 Vue 2 最棒的前端构建工具，Vue CLI 基于 Webpack 之上，是 Webpack 的超集。
- Vue CLI 基于 Webpack 构建，配置好了打包规则
- 内置热模块重载的开发服务器
- 有丰富的官方插件合集，站在 webpack 庞大的社区资源上
- 友好的图形化创建和管理 Vue 项目界面
区别
主要区别在于，对于Vite，在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器，浏览器通过原生的 script module 支持解析这些语法，并为每次导入发起HTTP请求。dev服务器拦截请求，并在必要时执行代码转换。例如，导入到*.vue文件的内容在发送回浏览器之前被即时编译。
Vite 是基于原生 ES6 Modules，在生产环境下打包使用的是 Rollup。 vue-cli 基于 webpack 封装，生产环境和开发环境都是基于 Webpack 打包。 所以两者在生产环境下都是基于源代码文件打包。但在开发环境中，两者有所不同。 Vite 在开发环境下，基于原生 ES6 ，无需对代码进行打包，浏览器可以直接调用。所以 Vite 因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验及其愉快。
如有不对之处，欢迎指出
