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" 属性：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
-------------- -----------
-------
------
---- ---------------
------- ------------- ----------------------------
-------
-------这样，我们就实现了模块化的 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 的其他功能和最佳实践。