浅析rollup插件@rollup/plugin-inject的作用以及在Vite项目中如何使用@rollup/plugin-inject插件注入全局变量
一、@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 之类的了。
