written in front

In the process of a project scaffolding upgrade, the previously webpackbuilt-based project is migrated to Vitethe build.

Some component libraries are jQuerydependent , such as: Bootstrap; When introducing these components, jQuerythe environment .

For example: when we import main.jsin as follows Bootstrap:

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

We must ensure that we have the global jQueryenvironment . Otherwise, a missing will be reported Bootstrapin jQuerythe error.

In the original project, webpack.base.conf.jsin , there is a section jQueryabout configuration like this:

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

Use webpack.ProvidePluginplug- in global injection jQuery, so that after the project is built and started running, the project has a global jQueryenvironment .

So, how to configure or realize this function in the Vite project?

Method 1. Global static import

The meaning of global static import is to use the original import file index.htmlin the main page file of the project to import .jsjquery

<!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>

Method 2. Use the plugin @rollup/plugin-inject to inject jquery

First, install jquery, @rollup/plugin-inject.

npm i jquery @rollup/plugin-inject -S

vite.config.jsIn the project's configuration file :

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')
    }
  }
})

In this way, the function of webpack.ProvidePlugin can be realized in the Vite project.

Extracurricular Knowledge:

1. About webpack.ProvidePlugin

webpackLearn how to use plugins for :

// 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'
    })
  ]
  ...
}

There are webpacktwo ways to use the plugin: new webpack.ProvidePlugin()and new HtmlWebpackPlugin();

The former is webpacka built-in module, while the latter is not webpacka built-in module and needs to be installed using npm before use.

ProvidePlugin, is a built-in module webpackof .
ProvidePluginModules loaded with will no longer need importand requirebe imported when used.
Take jqueryfor example , ProvidePluginafter the instance is initialized with , jqueryit will be automatically loaded and imported into the corresponding nodemodule .

new webpack.ProvidePlugin({
    
    
  $: 'jquery',
  jQuery: 'jquery'
})

// 然后我们可以在代码中直接使用

$('#item'); // <= just works
jQuery('#item'); // <= just works
// $ is automatically set to the exports of module "jquery"

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

Use to @rollup/plugin-node-resolvesolve reference problems between modules.

—————————— [End of text] ——————————

Front-end learning exchange group, if you want to come in face-to-face, you can join the group: 832485817 , 685486827 ;

Written at the end: convention is better than configuration - the principle of simplicity in software development

—————————— 【End】 ——————————

My:
Personal website: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
Wechat: miracle421354532

For more learning resources, please pay attention to my WeChat... okay?

In the Vite project, use the plugin @rollup/plugin-inject to inject global jQuery

In the Vite project, use the plugin @rollup/plugin-inject to inject the global jQuery environment