脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → @rollup/plugin-inject 注入全局 jQuery

在 Vite项目中使用插件 @rollup/plugin-inject 注入全局 jQuery的过程详解

 更新时间：2022年12月01日 10:31:39   作者：Never Yu  
在一次项目脚手架升级的过程中，将之前基于 webpack 搭建的项目移植到 Vite 构建，这篇文章主要介绍了在 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中使用create-keyframe-animation与动画钩子完成复杂动画

    Vue中使用create-keyframe-animation与动画钩子完成复杂动画

    这篇文章主要介绍了Vue中使用create-keyframe-animation与动画钩子完成复杂动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue.js中computed的基本使用方法

    Vue.js中computed的基本使用方法

    Vue.js中,computed属性根据依赖进行缓存,只有依赖改变时才重新计算,这样有效提高性能,computed属性是响应式的,可以自动更新,并且默认是只读的,它与methods的主要区别在于计算属性具有缓存性,而方法每次调用都会执行,使用computed可以使模板更加简洁,提高应用性能
    2024-09-09
  • VueJs 搭建Axios接口请求工具

    VueJs 搭建Axios接口请求工具

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。今天我们来介绍VueJs 搭建Axios接口请求工具，需要的朋友参考下本文吧
    2017-11-11
  • Vue cli+mui 区域滚动的实例代码

    Vue cli+mui 区域滚动的实例代码

    下面小编就为大家分享一篇Vue cli+mui 区域滚动的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 基于Vue和Element-Ui搭建项目的方法

    基于Vue和Element-Ui搭建项目的方法

    这篇文章主要介绍了基于Vue和Element-Ui搭建项目的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    vue+socket.io+express+mongodb 实现简易多房间在线群聊示例

    本篇文章主要介绍了vue+socket.io+express+mongodb 实现简易多房间在线群聊示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-10-10
  • Vue结合高德地图实现HTML写自定义信息弹窗全过程

    Vue结合高德地图实现HTML写自定义信息弹窗全过程

    最近开发中遇到一个多个点绘制,并实现点击事件,出现自定义窗口显示相关信息等功能,下面这篇文章主要给大家介绍了关于Vue结合高德地图实现HTML写自定义信息弹窗的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue项目中安装依赖npm install一直报错的解决过程

    Vue项目中安装依赖npm install一直报错的解决过程

    这篇文章主要给大家介绍了关于Vue项目中安装依赖npm install一直报错的解决过程,要解决NPM安装依赖报错,首先要分析出错误的原因,文中将解决的过程介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue组件传值异步问题子组件拿到数据较慢解决

    Vue组件传值异步问题子组件拿到数据较慢解决

    这篇文章主要为大家介绍了Vue组件传值异步中子组件拿到数据较慢的问题解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-08-08
  • uni-app图片预览及长按保存功能实现(超实用！)

    uni-app图片预览及长按保存功能实现(超实用！)

    这篇文章主要介绍了uni-app图片预览及长按保存功能实现的相关资料,通过一行代码即可实现图片预览,长按图片还能保存到相册,文中给出了详细的代码示例,需要的朋友可以参考下
    2026-02-02

最新评论