在 Vite项目中使用插件 @rollup/plugin-inject 注入全局 jQuery的过程详解
写在前面
在一次项目脚手架升级的过程中，将之前基于 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 中的 jquery
jQuery: "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 解决模块之间引用问题。
到此这篇关于在 Vite项目中，使用插件 @rollup/plugin-inject 注入全局 jQuery的文章就介绍到这了,更多相关@rollup/plugin-inject 注入全局 jQuery内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue transition组件简单实现数字滚动示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了Vue2.0在IE11版本浏览器中的兼容性问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最近做项目遇到这样的需求,需要上传的文件格式必须是pdf格式,方便我们查看,本文给大家分享element上传文件对格式限制的处理方案,感兴趣的朋友一起看看吧2024-02-02
最近上线一个项目,手机网站进行调起支付宝App支付,做起来还是满顺手的,在此做个记录,这篇文章主要给大家介绍了关于前端H5微信支付宝支付实现方法的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了Vue3 全局实例上挂载属性方法，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue项目下，如何用命令直接修复ESLint报错，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
由于目前公司采用了ProtoBuf做前后端数据交互，进公司以来一直用的是公司大神写好的基础库，完全不了解底层是如何解析的。下面小编给大家分享vue中使用protobuf的过程记录，需要的朋友参考下吧2018-10-10
这篇文章主要介绍了在vue3中安装使用bootstrap过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue 指令与过滤器，本文通过案例代码给大家详细讲解，给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11
介绍了如何在Vue项目中使用Axios封装请求、配置拦截器,并在api.js中统一管理API接口,同时,也讲解了如何在vite.config.js中配置解决跨域问题,这些操作可以优化前端代码结构,提高开发效率2024-09-09
最新评论