Vite 工具链上手使用

关于 Vite 的讨论一直都没有停过，到了 Vue3 的发布，热度直接到了最高点，一度被认为是下一代的构建工具。

既然评价这么高，不试用下怎么可以，毕竟前端圈子最出名的就是卷。

出现原因

在我们正式开始 vite 体验之前，我们先要了解下 vite 为什么会出现。

在前端刀耕火种的时候，大家都是手写 css/js，然后手动在后端 mvc 模板里添加引用，没有什么工程化的概念，前端角色定位只是页面仔。

后来 grunt/gulp 出现，然前端出现了模块化的概念。不同的功能模块通过 grunt/gulp 进行代码的编译、压缩，一定程度上有了工程化的雏形。

直到 webpack 的横空出世，前端开始了真正意义上的模块化开发，而 webpack 引入的构建流程，使得前端工程化已经变得成熟，直到目前为止，webpack 仍是最流行的构建工具，没有之一。

既然 webpack 这么强，那为什么尤雨溪还要开发 vite 这个构建工具呢？这不得不提到目前 webpack 所存在的一个非常大的问题——构建时间长

因为 webpack 总是要预先构建，所以任何的修改都会导致 webpack 做打包。如果项目非常大，引入的依赖非常多，首次构建就会花费非常多的时间，即使使用了的模块热更新(HMR)，文件修改也要等待构建完成才能反应到页面上。

漫长的初始构建时间导致了网上流传一个段子：上午到公司打开ide开始构建，接杯茶开始等待完成，一个上午就结束了。此时的开发者急需一个能快速构建的解决方案，此时，vite 出现了。

原理简述

vite 跟 webpack 之流最大的不同就是：开发模式下，它不做代码编译，它直接将我们的原生 esm 模块发给浏览器！

看到这你可能已经猜到了，vite 的快是借助了浏览器支持原生 esm 模块的特性。一个是编译打包之后再发给浏览器解释运行，一个是直接发给浏览器解释运行，你说哪个快？

虽然借助浏览器支持 esm 的特性，能让我们的启动速度变快，但是“理想很丰满，现实很骨感”，我们的生态圈中绝大多数仍然是 cjs 模块，无法在浏览器中以 esm 模块形式运行。怎么解决这个问题呢？vite 的做法就是“依赖预构建”。

简单的说，就是把 cjs 模块重新翻译成 esm 模块让浏览器能执行；同时将一些零散的模块进行合并，减少模块 http 请求数。这两个动作也将 vite 的速度降了一些，不过即使这样，也比 webpack 这种全构建的方案快了不止一星半点。

关于 vite 的简单介绍就到这里，我们接下来上手使用一下看看。

快速使用

Vite 需要 Node.js 版本 14.18+、16+。有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

在技术栈选择上，我们选择 vue 技术栈，至于其它的技术栈，感兴趣自行了解，不过多介绍。