简介
@babel/plugin-transform-modules-umd 是 babel 插件中的一个，它提供了一种将 ES6 模块转换为 UMD（通用模块定义）格式的方法。通过这个插件，开发者可以让自己的 ES6 模块在 Node.js 和浏览器端都可用，并且具有很好的兼容性。
安装
首先，我们需要在项目中安装 @babel/plugin-transform-modules-umd。在项目根目录下执行以下命令：
npm install @babel/plugin-transform-modules-umd --save-dev
配置
接着，我们要在 babel 的配置文件中使用该插件。在 .babelrc 文件中添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------------------------
-
---------- -
------------- ----
--
--------------- ----
-
-
-
-这里的配置中有两个参数需要注意：
- globals：指定全局变量的名称，如果模块需要使用其他模块作为依赖，那么这里的名称应该和其他模块中定义的名称一致。
- exactGlobals：控制是否严格匹配全局变量名称。如果设置为 true，那么在代码中使用该全局变量时，变量名称必须和配置中指定的名称一致。
示例代码
接下来，我们通过一个具体的示例来演示如何使用 @babel/plugin-transform-modules-umd。
首先，在项目中创建一个名为 math.js 的文件，文件中定义一个加法函数。
export function add(a, b) {
return a + b;
}然后，在项目中创建另一个名为 index.js 的文件，文件中引入刚才定义的 math.js 。
import { add } from "./math";
console.log(add(1, 2));接下来，我们执行以下命令：
npx babel index.js
执行完成后，我们发现生成了一个名为 index.js 的文件，文件中的内容如下所示：
-- -------------------- ---- -------
--------- -------- -------- -
------ ------- --- -------- -- ------ ------ --- ----------- - ---------------- -
------ ------ --- ---------- -- ---------- - ------------------- -------- -
------- - ------ -- ----- ---------------------- - -----
------- --------- --------- - ---- --------
-------- ------ -- -
------ - - --
-
----------- - ----
------------------------------ ------------- - ------ ---- ---
-----可以看到，这里生成了一个名为 mathlib 的全局变量，同时将 add 函数赋值给了该全局变量中的 add 属性。这样，我们就可以在其他 JavaScript 文件中引用 mathlib 常量，调用其中的函数了。
总结
通过本文的介绍，我们了解了如何使用 @babel/plugin-transform-modules-umd 插件将 ES6 模块转换为 UMD 格式。同时，我们还演示了如何将一个官方命名的空间与变量进行匹配，以便在浏览器中正确的使用它。通过学习这个过程，我们可以更好的理解 babel 插件的使用，提升前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/90911