什么是 Vite

Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。那么 Vite 究竟有什么魅力？

这里引用一下 vite 官网首页的描述：下一代前端开发与构建工具

为什么是下一代呢？

现有的前端构建工具不够我们用吗？

Vite 是不是在重复造轮子？

下面我就用简单的逻辑解释一下 Vite 的优越性。

为什么是下一代

为了解释“下一代”这个问题，我们需要先了解一下“上一代”有什么问题。

为了了解“上一代”的问题，我们就需要弄懂“模块化”的概念。

• 在ES6出现之前，我们的代码模块化都是使用的社区规范

  例如 node.js 中的 Common JS 规范。它并不是语言官方给出的规范，而是我们的开发者社区提供的规范，只不过用在了 node.js 当中。

  再比如我们客户端的 AMD、CMD 模块化规范

• ES6 出现之后，代码模块化有了语言规范，即 ES-Module

  ES-Module 是伴随 ES6 出现的原生js模块化解决方案，其优越性这里先略掉。

模块化方案有很多，基于这些方案的工具也有很多。这里先放个结论：抛弃社区规范，使用语言规范成为前端模块化开发的趋势

所以，Vite 可以说是“下一代“

现有的前端构建工具不够我们用吗

先来看看模块化打包工具的出现是需要解决什么问题的：

1. ES-Module 的浏览器兼容性问题
2. 模块文件过多导致频繁发送网络请求的问题
3. 资源文件模块化问题

我们常见的构建工具：webpack、rollup、parcel 等都着手解决了这些问题。

其中，Vite 的构建指令就是通过 rollup 来打包你的代码。而 rollup 的官网中有这么一句话：

rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。

也再次印证了模块化方案要紧跟 ES6 的潮流，所以 Vite 它来了。

Vite 是不是在重复造轮子

都读到这里了，显然不是啊。

Vite 的特点

• 快速的冷启动
• 即时的模块热更新
• 真正的按需编译

原理：利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间

开始使用 Vite2.0

Vite2.0 算是 Vite 的第一个稳定版本，带来了大量的改进。所以我们直接使用 Vite 2.0 即可。

1. 搭建命令

   使用npm：

   npm init @vitejs/app
   

   使用yarn：

   yarn create @vitejs/app
   

2. 根据提示选择构建的项目

   这一步会让你输入项目名称，并选择构建 vue 还是 react 等项目，非常简洁快速。

   

   我这里使用了默认的项目名，选择了 vue + JavaScript 的项目

3. 生成项目

   项目目录如下：

   

4. 下载并运行项目

   npm install
   

   npm run dev
   

   这里要注意一下路径是否正确

5. 完成

vite 的具体使用细节，例如如何使用scss、路由、插件等，有时间的话会在单独的章节列出来，详见 Vite官网