作者： Andy Li                                    翻译：张全玉

以ES6模块的形式编写JavaScript代码已经成为一种常见的行业实践。现在的浏览器已经支持ES6模块，但正如web开发中的大多数其他问题一样，并不是所有的浏览器都支持它。

因此，我们不必依靠确切的ES模块为客户端提供服务，而是必须依赖一个构建系统来将代码转换并捆绑到所有浏览器都可以处理的代码，不仅用于生产，还用于开发。

在开发周期中，这似乎存在很多不必要的捆绑，因为开发人员在开发应用程序时使用只能现在的浏览器。

如果有一种方法，可以直接为开发提供服务于ES模块，并且让构建系统像往常一样捆绑代码，那会很好吗？我们获得了直接运行模块的所有速度优势，而无需降低对IE的支持。

Vite可以帮助我们做到这一点。

Vite是由Vue的创建者Evan You开发的Vue.js应用程序构建工具。在本文的剩余部分中，我们将通过一个简单的实际操作代码演示来更深入地了解它的含义和作用。

简而言之

为了了解现在浏览器的功能，让我们从一个简单的实验开始，直接在浏览器中运行ES模块，而不需要任何构建系统的帮助。

首先，这样一个模块：

📄hello.js

function hello(){    alert("Hello");}export default hello;

然后，第二个模块导入上述模块：

📄main.js

import hello from './hello'hello();

最后，将main.js引入html文件中：

<script type="module" src="main.js"></script>

此代码设置可在除IE之外的大多数现代浏览器上使用。 （但是，我们仍然需要使用静态服务器来提供文件，因为使用<script>标签导入模块受CORS限制。）

问题

由于IE在市场上仍占有相当大的份额，因此忽略IE浏览器是不切实际的。这就是为什么当前的标准工作流是将“未来”代码转换成所有浏览器都能理解的更“传统”的代码。通常由Webpack和Babel这样的工具来处理。

在开发周期中，我们必须每天更改和保存代码几百次。热重载过程涉及每次我们更改模块中的代码时，都将模块放入绑定管道，这一过程非常缓慢。

现在输入Vite

Vite是用于解决此特定速度问题标准Vue CLI的替代品。

因此，在开发过程中，您可以继续在ES模块中编写代码，而Vite将直接为您的浏览器提供ES模块。您要做的只是避免在开发过程中使用不支持ES模块的浏览器。

由于构建系统将跳过绑定过程，直接将模块提供给浏览器，因此刷新代码更改页面时此方法速度很快。

对于生产环境，它将采用与Vue CLI处理它类似的旧方法。由于并不是所有的客户都会使用现代浏览器浏览您的网站，Vite会将模块转换为所有浏览器都能理解的版本。

如您所见，Vite专注于开发过程中的速度，而不是生产（因为生产构建通常已经进行优化了）。

试试看

Vite入门很简单。我们只需要使用npm init命令运行vite-app初始化程序：

npm init vite-app my-app

然后，安装依赖项：

cd my-appnpm install

最后，运行应用程序：

npm run dev

在浏览器输入localhist:3000，您将看到默认的欢迎页面。

检查代码

如果使用浏览器中的代码检查器呈现渲染的HTML，则会发现导入ES模块的脚本标记。

firebasestorage.googleapis.com/v0/b/vue mastery.appspot.com/o/flamelink%2Fmedia%2FVite1.opt.jpg？alt=媒体和令牌=ee0ef062-1982-43a7-b7ff-8737aa92fbcf

如您所见，它从src获取一个模块src/main.js.

如果你沿着线索检查src里面的东西/主.js，您会发现浏览器中的代码或多或少与源代码相同。

Browser:

firebasestorage.googleapis.com/v0/b/vue mastery.appspot.com/o/flamelink%2Fmedia%2FVite2.opt.jpg？alt=媒体和令牌=020b9b7e-574d-41ab-8877-ca7cadfa6a86

Source:

📄src/main.js

import { createApp } from 'vue'import App from './App.vue'import './index.css'​createApp(App).mount('#app')

两个版本之间的导入路径略有不同，但是，这证明Vite提供的是模块而不是包。

如果我们深入研究并检查src/App.vue的内容，我们将看到另一个模块，但这次代码与源模块大不相同：

Browser:

缺

Source:

<template>    <img alt="Vue logo" src="./assets/logo.png" />    <HelloWorld msg="Hello Vue 3.0 + Vite" /></template>​<script>import HelloWorld from './components/HelloWorld.vue'​export default {    name: 'App',    components: {        HelloWorld    }}</script>

现在应该清楚的是，Vite不仅仅是直接向浏览器提供源代码，它仍然会在有对浏览器没有意义的地方编译源代码。例如，.vue文件中的<template>标记和<script>标记不是有效的JavaScript，因此Vite会将其转换为浏览器可以理解的实际JS代码。

所以，基本上，Vite仍然通过一个翻译过程来运行模块，而不是捆绑过程。

仍然只是Vue

使用Vite，开发Vue应用程序的方式仍然相同。

为了演示，让我们创建一个名为Counter的新模块： 📄src/components/Counter.vue

<template>    <p>{{ count }}</p></template>​<script>​export default {    name: 'Counter',    data() {        return {            count: 0        }    }}</script>

然后，添加单击事件：

📄src/components/Counter.vue

<template>    <p v-on:click="count++">{{ count }}</p></template>​<script>export default {    name: 'Counter',    data() {        return {            count: 0        }    }}</script>

最后用默认的HelloWorld组件交换它：

📄src/App.vue

<template>    <Counter></template>​<script>import Counter from './components/Counter.vue'export default {    name: 'App',    components: {        Counter    }}</script>

现在您应该在浏览器中看到一个数字，单击该数字将增加其计数。

时代变迁

Vite是一个特殊的工具，它强调了web开发时代的逐渐变化，并反过来预示了未来JavaScript的一些开发实践。

选择在NPM设置中创建JavaScript应用程序而不是纯前端设置不再是一个奇特的选择。相反，它被认为是默认的标准选择。由于模块可以直接提供给浏览器，而无需捆绑，因此调试这些模块与调试传统JavaScript代码一样简单。

自然而然的下一个阶段可能是一类新工具，它可以有条件地为支持浏览器的本机模块提供服务，不仅在开发中，而且在生产中。那么，JavaScript捆绑将不再是一种常态。相反，这只是一个例外，只适用于不支持模块的浏览器。

总有一天，web开发人员会为未来即将到来而欣喜。