Vite 与 vanilla-JavaScript中文网-JavaScript教程资源分享门户

Vite 与 Vanilla JavaScript

在本章节中，我们将探讨如何将 Vite 与 Vanilla JavaScript 结合使用。Vite 是一个构建工具，能够显著提升前端项目的开发体验和性能。通过结合 Vite 和 Vanilla JavaScript，我们可以创建轻量级、高性能的 Web 应用程序。

设置项目

首先，我们需要设置一个基本的 Vite 项目。打开终端并运行以下命令：

npm create vite@latest my-vanilla-app --template vanilla

这个命令会创建一个名为 my-vanilla-app 的新文件夹，并初始化一个基于 Vanilla JavaScript 的 Vite 项目。进入项目文件夹：

cd my-vanilla-app

然后安装依赖：

npm install

最后，启动开发服务器：

npm run dev

现在，你可以在浏览器中访问 http://localhost:3000 查看项目。

项目结构

默认情况下，Vite 创建的项目包含以下目录和文件：

index.html：入口 HTML 文件。
main.js：JavaScript 入口文件。
style.css：CSS 样式文件。
assets：用于存放静态资源（如图片）的文件夹。
public：用于存放公共资源的文件夹。

你可以根据需要修改这些文件，以适应你的项目需求。

引入外部库

在 Vanilla JavaScript 项目中，我们经常需要引入一些外部库。例如，我们可以引入 jQuery 或者 Lodash 来简化 DOM 操作或处理数据。这里以 jQuery 为例：

首先，在 index.html 中添加一个 <script> 标签来引入 jQuery：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

接下来，在 main.js 中使用 jQuery：

document.addEventListener('DOMContentLoaded', function () {
    // 使用 jQuery 选择器
    const element = $('#my-element');
    console.log(element.text());
});

这样，我们就成功地在 Vanilla JavaScript 项目中引入并使用了 jQuery。

使用模块化编程

虽然 Vanilla JavaScript 本身不支持模块化，但借助于 ES6 模块，我们可以实现模块化编程。Vite 支持原生的 ES 模块，因此我们可以很方便地使用模块化编程。

假设我们有两个文件 utils.js 和 app.js，其中 utils.js 包含一些工具函数，而 app.js 是主应用文件。首先，在 utils.js 中定义一个简单的工具函数：

// utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}

然后，在 app.js 中引入并使用这个函数：

// app.js
import { greet } from './utils.js';

document.addEventListener('DOMContentLoaded', function () {
    const message = greet('World');
    console.log(message);
});

为了使浏览器能够识别 ES 模块，我们需要在 index.html 中添加 type="module" 属性：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vanilla App</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

这样，我们就实现了模块化的 JavaScript 编程。

性能优化

由于 Vite 的热更新机制和按需编译特性，我们的项目在开发过程中已经具备了不错的性能。但在生产环境中，我们还需要进行一些额外的优化。

首先，确保在发布之前启用生产模式。在 package.json 中添加一个脚本：

{
    "scripts": {
        "build": "vite build",
        "serve": "vite preview"
    }
}

然后运行以下命令来构建项目：

npm run build

这将会生成一个优化后的生产版本。最后，使用 npm run serve 启动预览服务器，检查生成的文件是否正确。

小结

通过本章的学习，我们了解了如何使用 Vite 构建基于 Vanilla JavaScript 的 Web 应用程序，并且掌握了如何引入外部库和实现模块化编程。希望这些知识能够帮助你在实际项目中更好地利用 Vite 和 Vanilla JavaScript。

接下来，我们将继续深入学习 Vite 的其他功能和最佳实践。