Vite 项目中如何使用 jQuery？

在 Vite 项目中使用 jQuery 的终极指南

简介

Vite 是一个现代构建工具链，在使用 jQuery 时可能会遇到问题。本文将详细介绍如何使用 Rollup 插件注入来解决这些问题，以便在 Vite 项目中顺利使用 jQuery。

问题根源

Vite 默认不包含 jQuery。因此，在 Vite 项目中使用 jQuery 会出现错误。

解决方案：Rollup 插件注入

要解决这个问题，可以使用 Rollup 插件注入将 jQuery 手动注入到 Vite 项目中。

步骤

1. 安装 Rollup 插件注入

   npm install --save-dev @rollup/plugin-inject
   

2. 修改 Vite 配置文件

   在 vite.config.js 中，将以下代码添加到 plugins 数组中：

   inject({
      $: 'jquery',
      jQuery: 'jquery',
   }),
   

3. 在 main.js 中导入 jQuery

   import $ from 'jquery';
   window.$ = window.jQuery = $;
   

处理警告

你可能会收到有关 Rollup 插件注入无法解析文件的警告。要解决此问题，请将 inject 插件的 include 选项设置为仅包含你要注入 jQuery 的文件。

示例代码

以下示例代码展示了如何在 Vite 项目中使用 jQuery：

// main.js
import $ from 'jquery';

$(document).ready(function() {
  // jQuery 代码
});

深入探讨

为什么不使用 jQuery CDN？

使用 Rollup 插件注入比使用 jQuery CDN 更好，因为：

• 它消除了 CDN 的潜在性能问题和安全性隐患。
• 它提供了更紧密的代码控制和更小的包大小。

结论

通过使用 Rollup 插件注入，你可以轻松地在 Vite 项目中使用 jQuery。遵循本文中的步骤，你可以无缝地整合 jQuery 并充分利用它的功能。

常见问题解答

1. 为什么 jQuery 在 Vite 中不起作用？

   因为 Vite 默认不包含 jQuery。

2. Rollup 插件注入是什么？

   它是一个 Vite 插件，用于手动注入库和代码段。

3. 为什么我收到 Rollup 插件注入警告？

   因为注入插件无法解析包含 jQuery 导入的文件。将 include 选项设置为仅包含这些文件即可解决此问题。

4. 使用 Rollup 插件注入比使用 jQuery CDN 有什么好处？

   它消除了 CDN 问题，提供了代码控制和更小的包大小。

5. 如何在 Vite 中导入 jQuery？

   在 main.js 中导入 jQuery 并将其分配给 $ 和 window.$。