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

    在 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'

    • 1
    • 2
    • 3
    • 4

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    使用 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-Vue3title>
    <script src="/src/jquery.min.js">script>
  head>
  <body>
    <div id="app">div>
    <script type="module" src="/src/main.js">script>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

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

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

    npm i jquery @rollup/plugin-inject -S

    • 1

    在项目的配置文件 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')
    }
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    这样，即可在 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'
    })
  ]
  ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    这里面有两种 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"

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

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

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

    前端学习交流群，想进来面基的，可以加群： 832485817，685486827；
    前端顶级学习交流群（一） 前端顶级学习交流群（二）

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

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

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

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

  • 相关阅读:
    【每日一题】对角线遍历
    Kernel: config: NET_FLOW_LIMIT；netdev_max_backlog
    Java“牵手”ebay商品详情数据，ebay商品详情API接口，ebayAPI接口申请指南
    VirtualKD-Redux 双机调试内驱驱动
    前端性能优化终极指南
    TMP451
    SSM+基于Vue框架的在线投票系统的设计与实现 毕业设计-附源码221604
    SpingMVC请求和响应
    go语言常量中的iota
    10分钟让你拿下Linux常用命令，网安运维测试人员必掌握！
  • 原文地址：https://blog.csdn.net/csdn_yudong/article/details/128122672