介绍
在前端应用中，我们经常需要使用各种第三方库和框架。为了使这些库和框架能够正常工作，我们需要确保它们的依赖项已经被正确加载。通常情况下，我们可以手动在 HTML 文件中引入这些依赖项，或者将其打包到一个单独的 JavaScript 文件中。然而，这种方法往往会导致代码冗余和可读性降低。
Rollup-plugin-inject 是一个 Rollup 插件，可以自动将指定的变量注入到模块中。这个插件可以帮助我们自动注入第三方库和框架所需要的依赖项。通过使用这个插件，我们可以使我们的代码更加简洁、易于维护和阅读。
安装
你可以通过 npm 来安装 rollup-plugin-inject 插件：
npm install --save-dev rollup-plugin-inject
使用
以下是使用 Rollup-plugin-inject 插件的示例代码：
-- -------------------- ---- ------- ------ - ------ - ---- --------- ------ ------ ---- ----------------------- -------- ------ -------------- -------- - -------- -- --------- -- --------- --- -- ---------------- -- - -------------- ----- ----------------- ------- ------- --- ---展开代码
在上面的示例代码中，我们使用了 Rollup-plugin-inject 插件，并将 $ 和 _ 注入到了模块中。这样，我们就可以在代码中直接使用 $ 和 _ 变量了，而不必手动引入它们所依赖的库。
参数说明
Rollup-plugin-inject 插件提供了以下选项：
include：需要注入变量的文件路径。exclude：不需要注入变量的文件路径。modules：与变量名对应的模块名称或者路径。globals：与变量名对应的全局变量名称。
其中，modules 和 globals 两个选项是必须的。modules 用来指定变量对应的模块名称或路径，globals 用来指定变量对应的全局变量名称。当 Rollup-plugin-inject 插件找到一个被标记为需要注入的变量时，它会尝试从 modules 中查找对应的模块，并从该模块中导出相应的变量。如果没有找到对应的模块，则会将变量作为全局变量进行注入。
总结
通过使用 Rollup-plugin-inject 插件，我们可以自动注入第三方库和框架所需要的依赖项，使代码更加简洁、易于维护和阅读。同时，这个插件还提供了多个选项，可以满足不同的需求。如果你正在使用 Rollup 打包工具，并且想要优化代码，那么 Rollup-plugin-inject 插件一定是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44973
