一、@rollup/plugin-inject 插件作用
這個插件的作用是：掃描模塊代碼，找到需要替換的全局變量，同時通過Import注入變量。比如：針對全局使用的Promise的地方：Promise.resolve(1);我們想要通過自己的某個polyfill來模擬該行為，比如用es6-promise polyfill庫。
// 使用該插件：
{ plugins: [ injectPlugin({ // key，需要處理的本地標識符 // [source, localVariable] // source 目標資源的地址 // localVariable 需要用目標資源的哪個命名導出
Promise: ['es6-promise', 'PromisePolyfill'] }), ] }
配置之后，rollup會自動找到使用到Promise的地方，自動幫我們導入包，es6-promise，同時標識符也會相應的替換。
import { PromisePolyfill } from 'es6-promise'; // 替換之前的 Promise.resolve(1)
PromisePolyfill.resolve(1)
二、使用 @rollup/plugin-node-resolve 解決模塊之間引用問題
rollup-plugin-node-resolve 用途：解決依賴安裝問題，讓node支持ESM規范。使用 @rollup/plugin-node-resolve 解決模塊之間引用問題
三、在 Vite項目中，使用插件 @rollup/plugin-inject 注入全局 jQuery
1、問題背景：在一次項目腳手架升級的過程中，將之前基於 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 環境。
2、那么，在 Vite 的項目中，該如何來配置或者來實現這個功能呢？
（1）方法一、全局靜態引入。就是在項目的主頁面文件 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>
（2）方法二、使用插件 @rollup/plugin-inject 注入 jquery
首先，安裝 jquery、@rollup/plugin-inject
npm i jquery @rollup/plugin-inject -S
在項目的配置文件 vite.config.js 中：
import inject from '@rollup/plugin-inject'
export default defineConfig({ plugins: [ vue(), inject({ $: "jquery", // 這里會自動載入 node_modules 中的 jquery
jQuery: "jquery", "windows.jQuery": "jquery" }) ], resolve: { alias: { '@': resolve(__dirname, './src') } } })
這樣，即可在 Vite 項目中實現 webpack.ProvidePlugin 的功能。
3、關於 webpack.ProvidePlugin
// 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 的插件使用方式，這里面有兩種 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"
4、我們也可以使用該插件注入一些我們項目中自己的全局變量
import inject from '@rollup/plugin-inject' import resolve from '@rollup/plugin-node-resolve' export default defineConfig({ // ...
plugins: [ // ...
resolve(), inject({ $router: path.resolve('./src/router/index.js'), $request: path.resolve('./src/request/requestInit.js'), $util: path.resolve('./src/util/util.js'), $dayjs: 'dayjs' }) ], // ...
}
這樣就可以直接使用上面注入的全局變量 $router、$request 之類的了。