vite 引入jquery

原创

mob649e816347dd 2023-10-07 12:24:24 ©著作权

文章标签 jQuery 热更新 jquery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e816347dd的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vite 引入 jQuery

1. 什么是 Vite

Vite 是一个由 Vue.js 的作者尤雨溪开发的新一代前端构建工具。它通过利用 ES6 模块的特性，能够在开发过程中实现即时的模块热更新，提供了类似于 webpack 的功能，但具有更快的启动速度。

2. 为什么使用 Vite

Vite 的主要特点有：

快速的冷启动 - 由于 Vite 的启动过程无需将所有代码都打包，所以启动速度更快。
即时的热更新 - Vite 使用浏览器原生的模块系统，可以在开发过程中实现模块级别的热更新。
按需编译 - Vite 只会编译当前正在编辑的文件，而不会重新编译整个项目，从而提高了开发效率。
支持多种框架 - Vite 不仅可以用于 Vue.js 项目，还可以用于 React、Svelte 等其他框架。

3. 在 Vite 中引入 jQuery

Vite 默认使用 ES6 模块的方式引入外部依赖，而 jQuery 是一个传统的全局变量库，不适合直接使用 ES6 模块的方式引入。为了在 Vite 中使用 jQuery，我们需要做一些额外的配置。

3.1 安装 jQuery

首先，我们需要安装 jQuery。在项目根目录下打开终端，运行以下命令：

npm install jquery

3.2 配置 Vite

在项目根目录下，创建一个 vite.config.js 文件，并添加以下代码：

import { defineConfig } from 'vite';

export default defineConfig({
  // ...
  esbuild: {
    include: /\bjquery\b/,
    minify: false,
    target: 'es2015'
  }
});

这段代码告诉 Vite 在构建过程中，将 jQuery 视为一个全局变量，而不是一个模块。

3.3 在代码中引入 jQuery

在你的代码中，可以使用以下方式引入 jQuery：

import $ from 'jquery';

现在，你就可以在你的代码中使用 $ 符号来操作 DOM 了。

4. 代码示例

下面是一个简单的代码示例，演示了如何在 Vite 中引入 jQuery 并使用它来操作 DOM：

import $ from 'jquery';

function addElement() {
  const $element = $('<div>').addClass('red').text('Hello, Vite!');
  $('body').append($element);
}

addElement();

5. 序列图

下面是一个使用 mermaid 语法绘制的序列图，展示了在 Vite 中引入 jQuery 的过程：

sequenceDiagram
  participant User
  participant Vite
  participant jQuery

  User->>Vite: 修改代码并保存
  Vite->>Vite: 按需编译修改的文件
  Vite->>jQuery: 解析并引入 jQuery
  Vite->>User: 返回更新后的页面