先说说@rollup/plugin-inject 到底是个啥子玩意儿

说实话，这玩意儿是 Rollup 官方自带的一个插件。

它的定位啊，就跟 Webpack 那个 ProvidePlugin 差不多。

核心思路：把代码里出现的“全局变量”，悄悄变成显式的 import。

这样既保留了写法的便利，又遵循 ES Module 的规范，省掉了全局污染的麻烦。

哈哈，听起来有点高大上，但其实用起来hen直白。

为啥我们会需要它？

想象一下你在项目里随手用了 $、_、XMLHttpRequest 之类的全局标识。

平时没事儿还好，一旦打包成 ES Module，没人管这些全局到底从哪来。

结果呢？运行时可Neng报错，或者误判浏览器特性。

咱就是说用 inject 插件，它会帮你在每个文件顶部自动加上对应的 import 声明。

于是全局变量就被“干净利落”地换成了模块导入。

Zui基础的使用姿势

inject({
    modules: {
        $: "jquery",
        _: "lodash"
    }
});

转换前：

$.addClass;
var data = _.cloneDeep;

转换后：

import $ from "jquery";
import _ from "lodash";
$.addClass;
var data = _.cloneDeep;

注入范围Ke以精细控制

inject({
    modules: {
        XMLHttpRequest: 
    },
    // 控制注入范围，只在 ajax 封装工具内有效
    include: 
});

这样一来只有在 some-ajax-util 里出现 XMLHttpRequest 时才会被注入 polyfill。

配合其它插件的小技巧

@rollum/plugin-inject 建议放在 plugins 数组靠后的位置。

因为它是兜底插件，要等业务插件先把自己的东西处理完，再来统一注入全局变量。

比如你还有 rollup-plugin-commonjs、@rollup/plugin-node-resolve，顺序大概是：

// 示例
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import inject from "@rollup/plugin-inject";
export default {
    plugins: 
};

和 import 插件同场景怎么办？

@rollup/plugin-import 会把路径别名转成真实路径。

Ru果两者一起用，inject 必须跑在 import 前面这样注入语句才会走别名解析。

常见坑 & 调试经验

1️⃣ 静态块里的变量有时不会被正确识别为全局，需要手动排除或升级插件版本。

export class Foo {
    static {
        var bar = ; // 这里可Neng不会被 inject 替换
    }
}

2️⃣ Ru果某个全局标识本身就是原生 API，不要随便注入，否则会把原生实现覆盖掉。

inject({
    modules: {
        Symbol: 
    },
    // 排除原生 Symbol 场景
    exclude: 
});

3️⃣ 多参数函数如 setTimeout，只有多个参数才需要注入对应 polyfill，单参保持原样，这种细粒度控制目前只Neng靠 include/exclude 手动搞定。

随机插播——为什么百度不收录我的技术博客？

这个问题经常被问到，我也曾抓狂过几次。说实话，主要原因有三点：

内容重复度高：Ru果文章里大量复制官方文档或其他站点文字，百度会认为是“抄袭”。要想收录，就得加入自己的经验、案例和独到见解——这正是我们现在Zuo文章的方式啦！

LCP太慢：PWA 或者大型 SPA 打包后首屏渲染慢，会让爬虫超时放弃抓取。解决办法：开启代码分割、预加载关键资源，让首屏尽量轻量化。

Sitemap / robots.txt 配置错误：Sitemap 没写或者 robots 把重要路径给阻止了。检查下根目录下这俩文件是否正确指向你的页面路径即可。

# 小结一下：

#1 内容原创；#2 首屏性Neng；#3 正确声明爬虫入口。搞定这三点，大概率Neng让百度乖乖收录啦！哈哈~

@rollup/plugin-inject 的进阶玩法——模拟 SDK 环境

C端开发中，经常要对接第三方 SDK，但本地调试时没有真实环境，于是就想“假装”有一个 SDK 对象供代码使用。Inject Neng帮忙！

// 假设我们有一个本地 mock 实现
inject({
    modules: {
        upsdk: 
    },
    include: 
});

这样一来在 src 目录下所有出现 upsdk.xxx 的地方，dou自动指向我们本地 mock，实现开发与生产环境无缝切换。

@rollup/plugin-inject 与 polyfill 的配合策略

ECharts、Moment 等库经常挂载全局变量，Ru果直接用 polyfill，会导致冗余体积增长。Zui佳实践是只在需要的模块里注入对应 polyfill，而不是整个项目dou打进去。

inject({
    modules: {
        Promise: 
    },
    // 只在老旧浏览器专用入口文件里生效
    include: 
});

小结 & 心得体会

@rollup/plugin-inject kan似小工具，却Neng帮我们解决hen多“全局污染”和“隐式依赖”的痛点。

# 好处一：代码geng干净，模块化程度提升；# 好处二：避免运行时因缺失全局而报错；# 好处三：配合 Rollup 的 tree‑shaking，让未使用的 polyfill 自动剔除。

* 我们在实际项目里遇到过类似 “XMLHttpRequest 被误判为 IE6 检测” 的坑，只要加上一行 inject 配置，就瞬间消失——真香！*

Zui后再送你一句老友提醒

# 别忘了在 rollup.config.js Zui后一定要把 inject 放到数组尾部，否则可Neng被前面的插件抢走机会呀~ 哈哈！咱们今天聊到这儿，有任何疑问直接砸过来我这边随时待命。祝你玩转 Rollup，构建出geng优雅、geng可靠的前端工程！你懂的~ 🎉

---