快捷導(dǎo)航

在?Vite項(xiàng)目中使用插件?@rollup/plugin-inject?注入全局?jQuery的過(guò)程詳解

更新時(shí)間：2022年12月01日 10:31:39 作者：Never?Yu

在一次項(xiàng)目腳手架升級(jí)的過(guò)程中，將之前基于?webpack?搭建的項(xiàng)目移植到?Vite?構(gòu)建，這篇文章主要介紹了在?Vite項(xiàng)目中，使用插件?@rollup/plugin-inject?注入全局?jQuery,需要的朋友可以參考下

寫(xiě)在前面

在一次項(xiàng)目腳手架升級(jí)的過(guò)程中，將之前基于 webpack 搭建的項(xiàng)目移植到 Vite 構(gòu)建。

一些組件庫(kù)是依賴(lài) jQuery 的，如：Bootstrap；引入這些組件的時(shí)候，需要項(xiàng)目中已經(jīng)存在 jQuery 環(huán)境。

例如：當(dāng)我們?cè)?main.js 中使用如下方式引入 Bootstrap 時(shí)：

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

我們必須保證擁有全局的 jQuery 環(huán)境。否則，在 Bootstrap 中會(huì)報(bào)缺少 jQuery 的錯(cuò)誤。

在原項(xiàng)目中，在 webpack.base.conf.js 中，有一段關(guān)于 jQuery 的配置是這樣的：

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

使用 webpack.ProvidePlugin 插件全局注入 jQuery，這樣在項(xiàng)目構(gòu)建啟動(dòng)運(yùn)行后，項(xiàng)目中就有了全局的 jQuery 環(huán)境。

那么，在 Vite 的項(xiàng)目中，該如何來(lái)配置或者來(lái)實(shí)現(xiàn)這個(gè)功能呢？

方法一、全局靜態(tài)引入

全局靜態(tài)引入的意思，就是在項(xiàng)目的主頁(yè)面文件 index.html 中，使用原始引入 js 文件的方式來(lái)引入 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

在項(xiàng)目的配置文件 vite.config.js 中：

import inject from '@rollup/plugin-inject'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    inject({
      $: "jquery",  // 這里會(huì)自動(dòng)載入 node_modules 中的 jquery
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
})

這樣，即可在 Vite 項(xiàng)目中實(shí)現(xiàn) webpack.ProvidePlugin 的功能。

課外知識(shí)：

一、關(guān)于 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 內(nèi)置的模塊，后者不是 webpack 內(nèi)置的模塊，需要使用 npm 先進(jìn)行安裝再使用。

ProvidePlugin，是 webpack 的內(nèi)置模塊。
使用 ProvidePlugin 加載的模塊在使用時(shí)將不再需要 import 和 require 進(jìn)行引入。
以 jquery 為例，用 ProvidePlugin 進(jìn)行實(shí)例初始化后，jquery 就會(huì)被自動(dòng)加載并導(dǎo)入對(duì)應(yīng)的 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 解決模塊之間引用問(wèn)題

使用 @rollup/plugin-node-resolve 解決模塊之間引用問(wèn)題。

到此這篇關(guān)于在 Vite項(xiàng)目中，使用插件 @rollup/plugin-inject 注入全局 jQuery的文章就介紹到這了,更多相關(guān)@rollup/plugin-inject 注入全局 jQuery內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: