什么是Vite：现代和超快速项目工具指南---下一代前端工具

Vite 是一款用于脚手架和捆绑项目的现代、超快速工具，由于近乎即时的代码编译和快速的热模块更换，它迅速变得流行起来。在本文中，您将了解Vite是什么以及如何使用它来构建新项目，等等。

今天创建新项目的方式与我们多年前创建项目的方式大不相同。过去，通常的方法是创建一个文件夹，然后从创建一堆HTML，CSS和JS文件开始。使用FTP客户端手动部署项目，文件按原样上传，无需任何处理和优化，如缩小或压缩。

多年来，事情发生了变化，因为现在我们有很多令人惊叹的工具，如Babel和webpack，使我们作为开发人员的生活更轻松。我们应该密切关注生态系统，因为它发展得很快。在Web开发中，去年出现了一种新工具，它提供了Create React App（CRA）的替代方案，并且越来越受欢迎。它的创建者名为Vite（Vite.js），将其描述为“下一代前端工具”。今天，我们将探讨他们对荣耀的主张，看看如何使用Vite而不是CRA - 以及为什么！

如今，许多项目都是通过使用功能丰富的CLI工具启动的，这些工具提供具有代码转译和有用优化等功能的样板设置，或者是具有热模块替换的开发服务器。

许多流行的框架都提供了可用于基架项目的官方 CLI。例如，React 有 Create React App，而 Vue 有 Vue CLI。但是，这个领域还有其他竞争者不一定是特定于框架的。这就是为什么Vite，用于脚手架和构建现代项目的框架不可知工具，值得我们关注。因此，请继续阅读，了解Vite.js - 让我们确保我们与时俱进。

Vite的用途是什么？

Vite由Vue.js框架的创建者Evan You创建，是下一代前端工具，可提供超快的开发服务器，捆绑和出色的开发人员体验。当我说快速时，我是认真的 - 因为与其他工具（如webpack，Rollup或Parcel）相比，启动时间可以减少十倍。

是什么让Vite.js快？

Vite利用了原生ES模块，这些模块在常绿浏览器中受支持。在开发环境中，Vite运行一个服务器，用于通过ES模块动态编译和提供任何所需的依赖项。这种方法允许Vite处理和提供当时所需的代码。因此，Vite在服务器启动和代码更新期间需要处理的代码要少得多。对于其他工具（例如webpack）来说，情况并非如此。我们稍后将介绍为什么会这样。

Vite如此快速的另一个原因是因为它在开发过程中使用esbuild来预捆绑依赖项。esbuild是一个用Go语言编写的非常快速的JavaScript捆绑器。在下面，您可以看到esbuild fairs与其他捆绑器（例如使用JavaScript编写的webpack，Rollup和Parcel）的比较。

正如基准所示，差异是巨大的。现在，让我们来看看Vite与webpack的区别。

Vite vs. webpack

webpack是Web项目最常用的捆绑器之一，但它比Vite慢得多。原生ES模块的使用使Vite比webpack具有显着的速度优势，webpack以不同的方式处理代码和捆绑依赖项。webpack 在开发服务器准备就绪之前捆绑项目中的所有文件。

这是Webpack速度慢得多的最重要原因之一，尤其是在大型项目中。随着项目的增长，需要处理的代码量也会增加，因此使用webpack的编译过程只会越来越长。同样，在代码更新的热模块替换期间，webpack 需要做更多的处理来更新捆绑包并在开发过程中提供最新的代码。由于使用了本机ES模块，因此Vite的情况并非如此。下图显示了Vite如何处理文件。

如果我们有一个应用程序，其中包含一些页面，如主页，关于，联系人等，并且我们访问主页，我们真的只需要主页的代码，这就是我们通过Vite获得的。webpack将处理所有页面的代码，然后才为主页提供代码。

现在，让我们来看看如何使用Vite构建React项目。

使用 Vite 构建 React 项目的脚手架

Vite可用于为多个框架构建项目，例如React，Vue，Svelte等。对于此示例，让我们创建一个 React 应用程序。在终端中运行以下命令之一。

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

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vite-react-app -- --template react

# yarn
yarn create vite my-vite-react-app --template react

# pnpm
pnpm create vite my-vite-react-app -- --template react

壳

项目搭建基架后，cd放入其中，安装所有依赖项并启动开发服务器。

$ cd my-vite-react-app
$ npm install // or yarn
$ npm run dev // or yarn dev

壳

默认情况下，开发服务器在端口 3000 上启动，因此请在浏览器中 http://localhost:3000。您应该看到类似下面的内容：

这就是为项目搭建脚手架。让我们来看看如何将预处理器（如 SCSS）添加到 Vite 项目中。

使用预处理器

Vite内置了对Sass，Less和Stylus的支持。只需将它们作为依赖项安装，即可将它们添加到项目中。对于此示例，让我们安装 Sass。

$ npm install -D sass

壳

接下来，让我们将计数器逻辑从文件移动到名为 的新组件。App.jsxCounter

src/components/Counter.jsx

import { useState } from "react";
import styles from "./counter.module.scss";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div className={styles.counter}>
      <button type="button" onClick={() => setCount(count => count + 1)}>
        count is: {count}
      </button>
    </div>
  );
};

export default Counter;

React JSX

使用 Sass 就像创建一个扩展名的新文件，然后将其导入到组件中一样简单。除了 Sass，我们还将使用 CSS 模块。只需在文件名中的文件扩展名之前添加即可使用它们。例如，或者如果您使用的是 CSS 预处理器。.scss.modulestyles.module.cssstyles.module.scss

src/components/counter.module.scss

.counter {
  background-color: bisque;
}

断续器

最后，更新文件。App.jsx

src/App.jsx

import "./App.css";
import Counter from "./components/Counter";

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

React JSX

使用 Vite 进行路径解析和绝对导入

我真正发现麻烦的一件事是必须使用相对路径导入组件。虽然我们的例子很简单，但我处理的项目有很多嵌套文件，有时导入看起来像这样：

import FancyModal from '../../../../components/modal/FancyModal/FancyModal.jsx'

断续器

相反，如果我们能做这样的事情，那不是很好吗？

import FancyModal from '@/components/modal/FancyModal/FancyModal.jsx'

断续器

就个人而言，我更喜欢使用绝对进口，因为它们更干净。我们可以通过修改文件来配置Vite以支持它们。在下面，您可以看到用于添加将解析到目录的别名的代码。vite.config.js@src

vite.config.js

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

断续器

除了配置Vite来解析别名之外，我们还需要告诉代码编辑器。我们可以通过创建包含以下内容的文件来执行此操作。@jsconfig.json

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

断续器

如果您使用的是TypeScript，那么您将在文件中执行此操作。tsconfig.json

最后，我们可以更新导入。Counter

src/App.jsx

import "./App.css";
import Counter from "@/components/Counter";

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

React JSX

环境变量

在使用Vite的脚手架应用程序中使用环境变量时，存在细微的差异。首先，文件中定义的任何应向客户端代码公开的环境变量都需要以 word 为前缀。在根目录中创建一个新文件并添加变量，如下所示。.envVITE_.envVITE_MESSAGE

.env

VITE_MESSAGE="Hello Vite!"

断续器

另一个区别是我们如何在应用程序中访问此环境变量。大多数 CLI（如 Create React App）都会公开对象上的环境变量。但是，Vite会将它们暴露出来。process.envimport.meta.env

让我们更新组件以显示消息。AppHello Vite!

src/App.jsx

import "./App.css";
import Counter from "./components/Counter.jsx";

function App() {
  return (
    <div className="App">
      <Counter />
      {import.meta.env.VITE_MESSAGE}
    </div>
  );
}

export default App;

React JSX

Vite的优缺点

让我们来看看Vite的一些更突出的优缺点。

优点

• 正如我们已经建立的那样，使用Vite的一个巨大优势是通过即时更换热模块来快速启动。它比其他 CLI 快得多，例如 Create React App 或 Vue CLI，它们在引擎盖下使用 webpack。
• 对 TypeScript 的开箱即用支持。
• CSS预处理器支持Sass，Less和Stylus，以及PostCSS和CSS Modules。
• Vite 与框架无关，可与多个框架配合使用。例如，它为 React、Vue、Preact、Svelte、Lit 甚至 vanilla JavaScript 和 TypeScript 提供了官方模板。
• 它提供多页支持。
• Vite提供了一个“库模式”，可用于创建面向浏览器的库。

缺点

• 不同的工具用于捆绑开发和生产代码。esbuild 用于开发，而生产捆绑包是使用汇总构建的。在极少数情况下，对开发和生产环境使用不同的工具可能会导致难以调试和修复的错误。代码在开发过程中可以正常运行，但是在捆绑生产后，它将停止工作。我个人遇到了这样的问题，在GitHub上，开发人员报告了问题，例如#2139和#5803。
• Vite的另一个缺点是对Jest缺乏一流的支持，Jest是最流行的JavaScript测试框架之一。如果您有兴趣了解有关添加Jest支持进度的更多信息，可以关注此问题。

总结

Vite是一个了不起的工具，可以大大加快开发速度并节省大量时间。使用Vite的好处很大，但是缺乏Jest支持和偶尔难以调试的问题可能会对一些开发人员造成交易破坏。与任何新工具一样，由您决定是否值得立即切换到它，或者在此期间使用其他 CLI 来管理项目 - 这完全取决于您的团队和项目的最佳选择。