前言
在前端开发中，我们经常需要将模块打包成 UMD 格式，以便在浏览器环境（例如 script 标签）中使用。而 babel-plugin-transform-modules-umd 就是一款解决这个问题的 Babel 插件。
本文将介绍如何使用 @gerhobbelt/babel-plugin-transform-modules-umd 这个 npm 包，帮助你将模块打包成带 UMD 头部的 JS 文件，以便在浏览器中使用。
安装和使用
安装
使用 npm 安装 @gerhobbelt/babel-plugin-transform-modules-umd：
npm install @gerhobbelt/babel-plugin-transform-modules-umd --save-dev
使用
在 .babelrc 配置文件中添加该插件：
{
"plugins": [
"@gerhobbelt/babel-plugin-transform-modules-umd"
]
}然后，运行 Babel 以转换你的代码：
./node_modules/.bin/babel src --out-dir lib
其中 src 为源码目录，lib 为转换后输出的目录。
参数
@gerhobbelt/babel-plugin-transform-modules-umd 还支持一些参数，可以在 .babelrc 中进行配置。
umdNamespace
设置 UMD 命名空间，例如：
{
"plugins": [
["@gerhobbelt/babel-plugin-transform-modules-umd", { "umdNamespace": "mylib" }]
]
}会将模块打包成如下形式：
-- -------------------- ---- ------- ---------- -------- -------- - ------ ------- --- -------- -- ------ ------ --- ----------- - ---------------- - ------ ------ --- ---------- -- ---------- - ------------------- -------- - ------------- - --- ----------------------- ------- -------- --------- - ---- -------- -- ---- ---- ---- ----
exclude
设置排除文件列表，格式为正则表达式，例如：
{
"plugins": [
["@gerhobbelt/babel-plugin-transform-modules-umd", { "exclude": "\\.test\\.js$" }]
]
}将排除文件名为 .test.js 结尾的文件。
其它参数请参考 @gerhobbelt/babel-plugin-transform-modules-umd 的官方文档。
示例
例如我们有一个源码文件 index.js：
import add from './add';
export default function(name) {
return `hello, ${add(name)}`;
}使用 @gerhobbelt/babel-plugin-transform-modules-umd 插件打包后，会生成类似如下的 UMD 文件：
-- -------------------- ---- ------- ---------- -------- -------- - ------ ------- --- -------- -- ------ ------ --- ----------- - ---------------- - ------ ------ --- ---------- -- ---------- - ------------------- -------- - ------------- - --- ----------------------- ------- -------- --------- - ---- -------- --- --- - -------- -------- - ------ --- - -- -- --- ----- - -------- ----------- - ------ ------- -------------------- -- --------------- - ------ ----
可以看到，UMD 格式的头部被打印出来，模块也被包装成了一个自执行函数，并设置了命名空间。
总结
@gerhobbelt/babel-plugin-transform-modules-umd 是一款非常好用的 Babel 插件，能够帮助我们将模块打包成 UMD 格式，适用于在浏览器环境中使用。
本文介绍了该插件的安装和使用，以及一些参数的配置方法，同时也有一个源码文件的示例。
希望这篇文章对你们有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02d7ac403f2923b035bdcb