简介
rollup-plugin-external-globals 是一款 rollup 的插件，用于将外部依赖库转换为全局变量，从而可以在浏览器中使用，比如说将动态导入的 axios 库转换为全局变量 Axios，在许多情况下能够帮助开发者解决依赖问题，减少依赖库的体积。
使用方法
安装
使用 npm 进行安装：
npm install rollup-plugin-external-globals --save-dev
配置
在 rollup 的配置文件中添加以下代码：
-- -------------------- ---- -------
------ --------------- ---- ---------------------------------
------ ------- -
------ ---------------
------- -
----- ----------------
------- -------
----- ------- -- ----------
--
-------- -
-----------------
------ -------- -- --------------------
----- ------
--
-
--示例代码
以下是一个示例代码，假设我们的项目依赖了 axios 和 rxjs 两个库：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -- - ---- -------
------------------------------------------------------------------ -- -
--------------------------------
---
----- -- --------------
----- ----- -- -
-------------------
-
---执行 rollup -c 命令进行打包后，会生成一个 dist/index.js 文件，内容如下：
-- -------------------- ---- -------
--- ----- - ------
--- ---- - -----
--- ------- - ------
--- ---- - --------
------------------------------------------------------------------ ---------- -
--------------------------------
---
------- -- --------------
----- -------- ------- -
-------------------
-
---在浏览器中引入该文件后，即可使用全局变量 Axios 和 RxJS。
深度解析
externalGlobals 的作用
在使用动态导入的方式引入一个库时，通常情况下需要将该库打包到最终的代码中，从而可以正常运行，但是这也会造成体积的浪费，尤其是对于一些大型的依赖库来说。而使用 rollup-plugin-external-globals 插件可以将部分依赖库转换为全局变量，从而实现在浏览器端直接访问该依赖库而不需要进行打包的效果，达到减少依赖体积的目的。
配置参数
rollup-plugin-external-globals 接收一个对象作为参数，该对象的键值对分别表示要转换的库名和转换后的全局变量名。例如：
externalGlobals({
axios: "Axios",
rxjs: "RxJS",
lodash: "_"
})表示将 axios 库转为全局变量 Axios，将 rxjs 库转为全局变量 RxJS，将 lodash 库转为全局变量 _。
注意事项
转换为全局变量后，在使用时要注意不要与其他模块产生变量名冲突，避免造成不必要的问题。同时，也不要将每个依赖库都转换为全局变量，避免产生全局变量过多的问题。
总结
rollup-plugin-external-globals 插件能够帮助开发者解决依赖问题，减少依赖库的体积。在使用该插件时，需要注意全局变量的命名问题，同时尽量只将必要的依赖库转换为全局变量，避免出现全局变量过多的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc04db5cbfe1ea0611c81