Rollup插件注入指南
@rollup/plugin-inject 插件概述
@rollup/plugin-inject 是 Rollup 官方提供的插件，用于在打包过程中向模块中注入变量或模块。适用于需要全局注入依赖（如process.env或第三方库）的场景，避免手动在每个文件中引入。
核心功能
- 自动注入变量：将指定的变量或模块注入到每个文件的顶部，无需手动导入。
- 灵活配置：支持通过正则匹配或自定义函数选择注入目标。
- 兼容性处理：确保注入的变量符合模块规范（如 ESM 或 CJS）。
安装方法
通过 npm 或 yarn 安装插件：
npm install @rollup/plugin-inject --save-dev # 或 yarn add @rollup/plugin-inject --dev基本配置
在 Rollup 配置文件中引入插件并配置注入规则：
import inject from '@rollup/plugin-inject'; export default { input: 'src/index.js', output: { file: 'dist/bundle.js', format: 'esm' }, plugins: [ inject({ // 注入配置 Promise: ['es6-promise', 'Promise'], // 将 `es6-promise` 的 Promise 注入为全局变量 process: 'process' // 注入 `process` 变量（需安装 `process` 包） }) ] };配置选项详解
1. 键值对形式
通过对象键值对指定注入内容，键为全局变量名，值为模块路径或数组：
- 单字符串：
{ variable: 'module-path' }
直接注入module-path的默认导出。 - 数组形式：
{ variable: ['module-path', 'named-export'] }
注入module-path的具名导出。
2. 自定义解析
通过include和exclude控制注入范围：
inject({ Buffer: ['buffer', 'Buffer'], include: ['**/*.js'], // 仅对 JS 文件生效 exclude: ['node_modules/**'] // 排除 node_modules })3. 动态注入
使用函数动态返回注入内容：
inject({ __buildEnv__: () => JSON.stringify(process.env.NODE_ENV) })常见用例
注入全局变量
inject({ $: 'jquery', // 注入 jQuery 为全局 `$` _: 'lodash' // 注入 Lodash 为全局 `_` })处理 Node.js 环境变量
inject({ process: 'process', // 注入 `process`（需安装 `process` 包） Buffer: ['buffer', 'Buffer'] // 注入 Buffer })条件式注入
inject({ React: process.env.NODE_ENV === 'production' ? 'react/cjs/react.production.min.js' : 'react/cjs/react.development.js' })注意事项
- 模块安装：确保注入的模块已安装为项目依赖（如
process或buffer）。 - 命名冲突：避免与已有变量名冲突，可通过别名解决。
- 格式兼容：在非 ESM 格式（如 IIFE）中，需确保注入的变量符合全局作用域要求。
完整配置示例
import inject from '@rollup/plugin-inject'; export default { input: 'src/main.js', output: { format: 'esm', dir: 'dist' }, plugins: [ inject({ React: 'react', PropTypes: 'prop-types', exclude: ['**/test/*.js'], include: ['**/*.jsx?'] }) ] };