一、Vite是什么?
这篇文章产出自「字学镜像计划」——2021年7月稿,希望这篇文章能帮助你使用Vite快速调试和开启实践项目~
1.1 前言
Vite是一款比较新的前端开发工具,官方宣传语是“下一代前端开发与构建工具”,作者是著名框架VUE的作者尤雨溪。Vite在刚发布时,主打的特点就是:快!甚至连Vite这个单词也是来自法语“迅速地”。
我对Vite的印象就是,不仅打包和发布快,而且当你想要测试一个想法或者功能时,用Vite开启一个小项目,不用任何额外的配置操作,Vite的默认配置就能让你很舒服地调试。
1.2 对比其他工具
为什么要用Vite来调试?我觉得可以从相关的替代方案来对比一下,用Vite究竟舒服在哪里,
- 在线的快速Web开发工具:比如codesandbox等,优点当然也是即刻配置,随写随看,缺点是调试过程的愉悦度很依赖网络速度,如果你在外边咖啡厅、或者在网络不是很好的地方,那写完之后,点击运行到查看结果这段时间的延迟,真的不太能忍受。另一方面,在线编程也用不到自己平时习惯的IDE设置,这也很难忍,比如我最喜欢的保存(contol+s)+
prettier
的自动格式化功能。 - Webpack:Vite开发的目的就是替代Webpack的某些功能,比如打包、热更新,Vite的开箱配置就非常人性化,已经自动加载好了这些功能,如果用Webpack的话还要单独去配置,有些浪费时间(当然也可以自己提前配置脚手架,不过Webpack还是要慢一点hhh)。热更新是我在自己调试时最需要的功能,只需要保存代码(还是contol+s)就可以刷新页面,而不是还要去手动刷新,非常舒畅。
Evan一条很知名的推特:“用了Vite后感觉再也回不到Webpack了”...Webpack的作者还在下面回复了...
说了这么多,下面让我们开始看看,怎么快速开始一个Vite项目然后愉快地调试吧!
二、Vite入门级教程
注意,本文只是聚焦于怎样使用Vite开发,不涉及任何原理部分(毕竟作者水平有限=、=),关于为什么Vite这么快可以看看Vite的官方文档:为什么Vite这么快?
2.1 启动Vite
下面我们来一步步开始操作吧!
Vite提供npm和yarn两种命令行启动方式,
使用 NPM:
npm init @vitejs/app
使用 Yarn:
yarn create @vitejs/app
这里说@vitejs/app
这种方式已经要被deprecated了,现在请用npm init vite,
官网还没有更新,看到这里小伙伴可以注意一下
在”选择一个框架“这一栏,有我们熟悉的React、Vue可以选,这里我们选择vanilla
,这个单词特别有意思,可以理解为“原生的”,即“纯粹的,不使用任何框架的JavaScript开发”,这其实是一个梗,有兴趣的小伙伴可以参考前端社区的恶趣味之Vanilla JS,以及stackoverflow: what is VanillaJS。
2.2 Vite目录架构
Vite通过模块的引用关系来确定打包时用到的文件,具体是什么文件和选择的框架有关,在选择vanilla
的情况下,主要有如下三个文件,
- index.html:主页,也是所有文件的入口
- main.js:JS脚本,在主页中通过
<script>
标签引用 - style.css:样式文件,在JS脚本中通过
import './style.css'
引用
这样,在一开始的时候,这些文件都是关联好的,所以我们对任何一个文件的刷新都会立刻反应在开发页面上。
我们通过下面的命令打开页面,
npm run dev
在localhost
的3000端口就可以查看页面,可以看到,开发模式打包文件只用了168ms,可以说是非常地快,在文件规模变得更大的情况下优势更明显。
2.3 开始调试
首先,我们来看看页面的默认的样子,
是一个“Hello Vite!”文字,包裹在<div id="app"></div>
内部。现在,我们可以在这个页面测试任何你想要尝试的特性,比如,我们可以试一试一些CSS属性。
举个例子,我最近在学习用CSS做出卡片阴影的效果,现在我们来修改一下app
的CSS样式,看看效果如何,现在我们打开style.css
文件,新增一些样式,
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
/* 新增样式 */
background-color: aquamarine;
margin: auto;
width: 50vw;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
我们设置了一个背景颜色,通过margin
和width
属性让<div>
块居中,最重要的是加上box-shadow
,这是一个两层的阴影,看看下面的效果,
查看box-shadow的文档
Amazing!当我们在css文件里按下control+s的那一刹那,开发页面已经瞬间变化了。注意,仅仅一次的调试可能感受不到太大优势,但是当你不熟练某些特性,需要一步步调试查看时,快速刷新的优势就能体现了。
2.4 调试React
不仅仅是CSS,很多其他东西都可以举一反三。当我在学习React的时候,常常在官网看到某些coding的例子,想动手试一下,比如下面这个useState
的例子,
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
React官方虽然也会提供沙箱来提供调试,但用起来因为不是本地自己习惯的IDE配置,再加上网络卡卡顿顿的,总觉得别扭,而通过Vite来开启一个React项目就特别方便(还特别快!),而且如果你想要用CSS module或者sass等模块,甚至不需要自己配置loader
,前面已经说过,Vite已经做了特别人性化的开箱配置,把开发者经常用到的特性都已经默认开启了,直接import
就完事了。
三、结尾语
或许是没有什么Webpack的使用经验,我一开始用Vite的时候就感觉特别顺手。虽然现在Vite的生态应该还远不如Webpack,可能没有那么多强大的插件,但是对于初学者来说,如果用不到太复杂的功能,Vite其实已经足够了。作为Evan You的第二款力作,Vite和Vue有一脉相承的优点:特别完善且中文用户友好的文档,上手很容易。
如果还想要深入学习前端的构建工具,还可以动手尝试写一个Vite或Webpack插件,希望读完这篇文章的你有朝一日能够写出一个插件,给开源社区做出一份贡献~
(感谢阅读,请多支持,不足之处也请多指教)