前端开发与构建工具Vite

vite的特性

vite 主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

浏览器支持

默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入。传统浏览器可以通过官方插件 ​​@vitejs/plugin-legacy​​ 支持 —— 查看 构建生产版本 章节获取更多细节。

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

搭建第一个 Vite 项目

使用 NPM:

$ npm init vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

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

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

# npm 7+, 需要额外的双横线：
npm init 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

查看 ​​create-vite​​​ 以获取每个模板的更多细节：​​vanilla​​​，​​vanilla-ts​​​，​​vue​​​，​​vue-ts​​​，​​react​​​，​​react-ts​​​，​​preact​​​，​​preact-ts​​​，​​lit​​​，​​lit-ts​​​，​​svelte​​​，​​svelte-ts​​。

Vite 将 ​​index.html​​​ 视为源码和模块图的一部分。Vite 解析 ​​<script type="module" src="...">​​​ ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 ​​<script type="module">​​​ 和引用 CSS 的 ​​<link href>​​​ 也能利用 Vite 特有的功能被解析。另外，​​index.html`` 中的 URL 将被自动转换，因此不再需要 ​​%PUBLIC_URL%` 占位符了。