下一代前端构建工具Vite：快速调试

cescdf
2,260 阅读6分钟

一、Vite是什么？

这篇文章产出自「字学镜像计划」——2021年7月稿，希望这篇文章能帮助你使用Vite快速调试和开启实践项目～

1.1 前言

Vite是一款比较新的前端开发工具，官方宣传语是“下一代前端开发与构建工具”，作者是著名框架VUE的作者尤雨溪。Vite在刚发布时，主打的特点就是：快！甚至连Vite这个单词也是来自法语“迅速地”。

vite-speed

我对Vite的印象就是，不仅打包和发布快，而且当你想要测试一个想法或者功能时，用Vite开启一个小项目，不用任何额外的配置操作，Vite的默认配置就能让你很舒服地调试。

1.2 对比其他工具

为什么要用Vite来调试？我觉得可以从相关的替代方案来对比一下，用Vite究竟舒服在哪里，

  • 在线的快速Web开发工具：比如codesandbox等，优点当然也是即刻配置，随写随看，缺点是调试过程的愉悦度很依赖网络速度，如果你在外边咖啡厅、或者在网络不是很好的地方，那写完之后，点击运行到查看结果这段时间的延迟，真的不太能忍受。另一方面，在线编程也用不到自己平时习惯的IDE设置，这也很难忍，比如我最喜欢的保存（contol+s）+prettier的自动格式化功能。
  • Webpack：Vite开发的目的就是替代Webpack的某些功能，比如打包、热更新，Vite的开箱配置就非常人性化，已经自动加载好了这些功能，如果用Webpack的话还要单独去配置，有些浪费时间（当然也可以自己提前配置脚手架，不过Webpack还是要慢一点hhh）。热更新是我在自己调试时最需要的功能，只需要保存代码（还是contol+s）就可以刷新页面，而不是还要去手动刷新，非常舒畅。

vite-speed

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

vite-speed

这里说@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

vite-speed

在localhost的3000端口就可以查看页面，可以看到，开发模式打包文件只用了168ms，可以说是非常地快，在文件规模变得更大的情况下优势更明显。

2.3 开始调试

首先，我们来看看页面的默认的样子，

vite-speed

是一个“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的文档

vite-speed

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插件，希望读完这篇文章的你有朝一日能够写出一个插件，给开源社区做出一份贡献～

（感谢阅读，请多支持，不足之处也请多指教）

avatar
文章
阅读
粉丝