Vite2.0 正式发布，了解一下文档

Vite2自2月17号份发布之后，收获了前端圈的一片哀嚎：学不动了……

不不不，你得学！

Vite(法语意思是 “快”，发音为 /vit/，类似 veet)是一种全新的前端构建工具。你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具(如 esbuild)来提供一个快速且现代的开发体验。

图片.png

优点;💡 极速的服务启动

使用原生 ESM 文件，无需打包!

⚡️ 轻量快速的热重载

无论应用程序大小如何，都始终极快的模块热重载(HMR)

🛠️ 丰富的功能

对 TypeScript、JSX、CSS 等支持开箱即用。

📦 优化的构建

可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建

🔩 通用的插件

在开发和构建之间共享 Rollup-superset 插件接口。

🔑 完全类型化的API

灵活的 API 和完整 TypeScript 类型

搭建第一个 Vite 项目

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

使用 NPM:

npm init @vitejs/app

使用 Yarn:

yarn create @vitejs/app

然后按照提示操作即可！

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

# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue

支持的模板预设包括：

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts
• svelte
• svelte-ts

查看 @vitejs/create-app 获取每个模板的更多细节。

# 社区模板

@vitejs/create-app 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板，里面包含不同框架的模板。你可以用如 degit 之类的工具，使用社区模版来搭建项目。

npx degit user/project my-project
cd my-project
npm install
npm run dev

如果该项目使用 main 作为默认分支, 需要在项目名后添加 #main。

npx degit user/project#main my-project