写在前面

在一次项目脚手架升级的过程中，将之前基于 webpack 搭建的项目移植到 Vite 构建。

一些组件库是依赖 jQuery 的，如：Bootstrap；引入这些组件的时候，需要项目中已经存在 jQuery 环境。

例如：当我们在 main.js 中使用如下方式引入 Bootstrap 时：

// main.js
/* bootstarp */
import '@/assets/css/bootstrap.min.css'
import '@/assets/js/bootstrap.min.js'

我们必须保证拥有全局的 jQuery 环境。否则，在 Bootstrap 中会报缺少 jQuery 的错误。

在原项目中，在 webpack.base.conf.js 中，有一段关于 jQuery 的配置是这样的：

module.exports = {...plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery"})],...
}

使用 webpack.ProvidePlugin 插件全局注入 jQuery，这样在项目构建启动运行后，项目中就有了全局的 jQuery 环境。

那么，在 Vite 的项目中，该如何来配置或者来实现这个功能呢？

方法一、全局静态引入

全局静态引入的意思，就是在项目的主页面文件 index.html 中，使用原始引入 js 文件的方式来引入 jquery。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite-Vue3</title><script src="/src/jquery.min.js"></script></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

方法二、使用插件 @rollup/plugin-inject 注入 jquery

首先，安装 jquery、@rollup/plugin-inject.

npm i jquery @rollup/plugin-inject -S

在项目的配置文件 vite.config.js 中：

import inject from '@rollup/plugin-inject'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),inject({$: "jquery",  // 这里会自动载入 node_modules 中的 jqueryjQuery: "jquery","windows.jQuery": "jquery"})],resolve: {alias: {'@': resolve(__dirname, './src')}}
})

这样，即可在 Vite 项目中实现 webpack.ProvidePlugin 的功能。

课外知识：

一、关于 webpack.ProvidePlugin

了解 webpack 的插件使用方式：

// webpack.base.conf.js
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {...plugins: [new webpack.ProvidePlugin({}),new webpack.IgnorePlugin('/^\.\/locale$/, /moment$/'),// or(或者)new HtmlWebpackPlugin({template: './src/index.html'})]...
}

这里面有两种 webpack 的插件使用方式：new webpack.ProvidePlugin() 和 new HtmlWebpackPlugin();

前者是 webpack 内置的模块，后者不是 webpack 内置的模块，需要使用 npm 先进行安装再使用。

ProvidePlugin，是 webpack 的内置模块。
使用 ProvidePlugin 加载的模块在使用时将不再需要 import 和 require 进行引入。
以 jquery 为例，用 ProvidePlugin 进行实例初始化后，jquery 就会被自动加载并导入对应的 node 模块中。

new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'
})// 然后我们可以在代码中直接使用$('#item'); // <= just works
jQuery('#item'); // <= just works
// $ is automatically set to the exports of module "jquery"

二、使用 @rollup/plugin-node-resolve 解决模块之间引用问题

使用 @rollup/plugin-node-resolve 解决模块之间引用问题。

—————————— 【正文完】——————————

前端学习交流群，想进来面基的，可以加群： 832485817，685486827；

写在最后：约定优于配置 —— 软件开发的简约原则

——————————【完】——————————

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
微信： miracle421354532

更多学习资源请关注我的微信…好吗

在 Vite项目中，使用插件 @rollup/plugin-inject 注入全局 jQuery相关推荐

使用H5Stream实现rtsp视频流播放，在Vue项目中 (无插件、可多视频源播放、亲测可用)
本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流,从0到1的过程.包括WebSocket代理.h5ss.bat文件运行一会就自己卡死了.H5ss服务死掉自动定时重启的脚本等可 ...
vue项目中引入插件
(一)Vue引入jquer以及jquery插件步骤 (一)在package.json中添加 (二)安装jquery npm install jquery (三)修改build/webpack.base ...
移动端项目中vConsole插件的安装和使用
前端人在做移动端项目的时候,是最痛苦的,我们需要重复的发版,利用超多的console.log("123")来定位bug的位置.直到碰到了vconsole插件,这才让移动端的问题迎刃 ...
解决vue3+vite项目中引入mockjs失败的问题--无法找到模块“mockjs”的声明文件
看到上面报错,根据提示修改声明方式 declare module 'mockjs' 我们修改一下引入的声明,发现修改之后仍然报错: 解决方法: 需要在vite-env.d.ts文件中,添加 decl ...
Jenkins中使用HTML Publisher plugin插件
一.安装html插件方法一:系统中直接安装在[系统设置]-[管理插件]搜索HTML Publisher plugin后进行安装即可方法二:下载插件后手动安装 http://updates.jen ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
【踩坑】vite项目使用ant＜a-date-picker /＞提示报错 rr.isMoment is not a function 解决方法
1.问题描述项目技术栈:vue@2.6.10.ant-design-vue@1.7.8.vite@2.8.0 在 vite 项目中,使用 antdv <a-date-picker/> ...
vue项目导入elementui_在vue项目中使用elementui
如何让你的前端程序看起来很优雅而又简单. 最近我做的项目几乎都是管理系统,所以为了节约时间,开始使用ui框架-----elementui. 一个简单的管理系统来说,这套ui框架足够使用了,而且对样式的 ...

在 Vite项目中，使用插件 @rollup/plugin-inject 注入全局 jQuery

在 Vite项目中，使用插件 @rollup/plugin-inject 注入全局 jQuery 环境