Detailed explanation of the process of injecting global jQuery using plugin @rollup/plugin-inject in Vite project

Write in front

During a project scaffolding upgrade, the previous basiswebpackThe built project is ported toViteBuild.

Some component libraries depend onjQuery, such as:Bootstrap; When introducing these components, the project needs to already existjQueryenvironment.

For example: When we areIntroduced in the following wayBootstraphour:

// 
/* bootstarp */
import '@/assets/css/'
import '@/assets/js/'

We must ensure that we have a globaljQueryenvironment. Otherwise, inBootstrapThe missing report is reportedjQueryError.

In the original project,There is a paragraph aboutjQueryThe configuration is as follows:

 = {
  ...
  plugins: [
    new ({
      $: "jquery",
      jQuery: "jquery",
      "": "jquery"
    })
  ],
  ...
}

useGlobal plugin injectionjQuery, so that after the project construction starts and runs, there will be a global projectjQueryenvironment.

So, how to configure or implement this function in Vite projects?

Method 1. Global static introduction

The meaning of global static introduction is to the main page file of the projectin, use original importjsFiles are introducedjquery。

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

Method 2: Inject jquery using plugin @rollup/plugin-inject

First, installjquery、@rollup/plugin-inject.

npm i jquery @rollup/plugin-inject -S

Configuration file in the projectmiddle:

import inject from '@rollup/plugin-inject'

// /config/
export default defineConfig({
  plugins: [
    vue(),
    inject({
      $: "jquery",  // jquery in node_modules will be automatically loaded here      jQuery: "jquery",
      "": "jquery"
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
})

This allows the functions implemented in the Vite project.

Extracurricular knowledge:

1. About

learnwebpackHow to use plug-in:

// 
const HtmlWebpackPlugin = require('html-webpack-plugin')

 = {
  ...
  plugins: [
    new ({}),
    new ('/^\.\/locale$/, /moment$/'),
    // or (or)    new HtmlWebpackPlugin({
      template: './src/'
    })
  ]
  ...
}

There are two types ofwebpackHow to use plug-in:new ()andnew HtmlWebpackPlugin();

The former iswebpackBuilt-in module, the latter is notwebpackBuilt-in modules need to be installed first using npm.

ProvidePlugin,yeswebpackbuilt-in module.
useProvidePluginThe loaded module will no longer be needed when usedimportandrequireIntroduce.
byjqueryAs an example,ProvidePluginAfter instance initialization,jqueryIt will be automatically loaded and imported into the correspondingnodeIn the module.

new ({
  $: 'jquery',
  jQuery: 'jquery'
})

// Then we can use it directly in the code
$('#item'); // &lt;= just works
jQuery('#item'); // &lt;= just works
// $ is automatically set to the exports of module "jquery"

2. Use @rollup/plugin-node-resolve to solve the reference problem between modules

use@rollup/plugin-node-resolveSolve the problem of reference between modules.

This is the article about using plug-in @rollup/plugin-inject to inject global jQuery in the Vite project. For more related @rollup/plugin-inject to inject global jQuery content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!