在前端开发中，经常需要使用到打包工具对代码进行代码压缩和依赖管理等工作。打包工具的出现，让前端代码的开发和维护变得更加简单高效。其中 Rollup 是一款新型的打包工具，它主打的特色是采用 ES6 Module 标准进行打包处理，能够实现更高的代码压缩比例和更快的代码运行速度。而在 Rollup 中使用 @rollup/plugin-inject 插件可以方便的注入全局变量，可以扩展 Rollup 的功能。
什么是 @rollup/plugin-inject
@rollup/plugin-inject 是在 Rollup 构建过程中，自动将指定的变量或模块，注入到模块源代码中，使其能够在模块内直接使用。同样也可注入全局模块，可以通过 options 来配置注入的模块。
安装和使用
安装 @rollup/plugin-inject 可以选择使用 npm ，使用如下命令：
npm install --save-dev @rollup/plugin-inject
注入单个全局变量：
-- -------------------- ---- -------
-- ----------------------
------ - ------ - ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
--------
-------- ----------
-------- ------------------
-------- ---------
--
-
--注入多个全局变量：
-- -------------------- ---- -------
-- ----------------------
------ - ------ - ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------
-------- ----------
-------- ------------------
------- ---------
-------- ----------
------- ---------- ----------
--
-
--配置项
options.include
指定需要注入模块的文件的 glob 匹配模式。
options.exclude
忽略注入模块的 glob 匹配模式。
options.modules
一个对象，该对象的键是模块名称，值是模块在全局中的变量名，用于注入需要使用的模块。
示例：
-- -------------------- ---- -------
------ - ------ - ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------
-------- ----------
-------- ------------------
-------- -
-- ---------
------ --------
--------- -----------
-
--
-
--options.process
用于注入 Node.js 环境中的 process 全局变量。
示例：
-- -------------------- ---- -------
------ - ------ - ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------
-------- ----------
-------- ------------------
-------- ---------
--
-
--options.window
用于注入 Window 全局变量。
示例：
-- -------------------- ---- -------
------ - ------ - ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------
-------- ----------
-------- ------------------
------- --------
--
-
--options.global
用于注入多个全局变量。
示例：
-- -------------------- ---- -------
------ - ------ - ---- ------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
--
-------- -
--------
-------- ----------
-------- ------------------
------- -
-- ---------
------ --------
--------- -----------
-
--
-
--总结
@rollup/plugin-inject 是一个非常实用的插件，特别是当需要使用到全局变量注入时，它可以帮助我们解决很多问题。通过本文的介绍，相信大家已经能够很好的掌握它的使用方法。在前端开发中，我们需要不断的学习新技术，使用新工具，不断提高自身水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/a-rollup-plugin-inject