前端开发与构建工具Vite

简介: 前端开发与构建工具Vite

vite的特性

1673446036602.jpg

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%` 占位符了。

1673446024304.jpg

相关文章
|
1月前
|
缓存 前端开发 JavaScript
Vite 构建流程大揭秘:快速构建前端项目的秘密武器
Vite 构建流程大揭秘:快速构建前端项目的秘密武器
|
2月前
|
缓存 前端开发 JavaScript
(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)
(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)
60 0
|
3月前
|
缓存 前端开发 JavaScript
深入了解 Vite:快速、简洁、高效的前端构建工具(上)
深入了解 Vite:快速、简洁、高效的前端构建工具(上)
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
73 0
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
37 0
|
3月前
|
前端开发 JavaScript API
Vite 3.0 正式发布,下一代前端构建工具!
Vite 3.0 正式发布,下一代前端构建工具!
|
2月前
|
XML 前端开发 JavaScript
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
前端图形学实战: 从零实现编辑器的图层管理面板和实时缩略图(vue3 + vite版)
29 0
|
7月前
|
前端开发 JavaScript 开发者
Vite前端构建工具详解
Vite 是一款新兴的前端构建工具,它的出现带来了前端开发体验的革命性变化。本文将介绍 Vite 的基本概念和核心特性,并通过代码实例来演示其强大功能。
104 0
|
3月前
|
缓存 前端开发 JavaScript
深入了解 Vite:快速、简洁、高效的前端构建工具(下)
深入了解 Vite:快速、简洁、高效的前端构建工具(下)
深入了解 Vite:快速、简洁、高效的前端构建工具(下)
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-vite+vue3.2之1
前端学习笔记202305学习笔记第二十八天-vite+vue3.2之1
25 0