Babel 配置 Source Maps
Babel 是一个 JavaScript 编译器,通过语法转换器支持最新版本的 JavaScript,将其转译为能在旧版本浏览器或仅支持旧版本 JavaScript 的环境中能运行的脚本。
由于经过了这么一次转义,直接在浏览器或 Node.js 环境中运行的脚本将不再是我们最初所编写的代码了。因此,我们需要配置 Source Maps,从而可以在调试时能够继续调试我们原始编写的代码。
在命令行上配置
要在命令上配置 Babel 在生成 js 文件的同时生成对应的 Source Maps,我们可以用 -s
或 --source-maps
选项,并以 true
或 inline
作为参数;也可以不提供任何参数,效果与 true
等同。如:
babel -s -d lib src
# 或
babel -s true -d lib src
# 或
babel -s inline -d lib src
在 .babelrc 中配置
.babelrc
是 Babel 命令行(CLI)及 API 都会读取的配置文件,在 .babelrc
中我们也可以配置 Source Maps,不过需要注意的是在 .babelrc
中,sourceMaps
选项仅支持 inline
而并不支持 true
选项;或者说在 .babelrc
中指定 "sourceMaps": true
选项确实会生成 Source Maps,但该结果只提供给 API 使用,并不会将其写到硬盘上。
配置示例如:
{
"sourceMaps": "inline",
"presets": ["env"]
}
参考阅读
关于 Babel 的更多选项,可参考 API | Babel中文网。
.babelrc
中设置 "sourceMaps": true
不起作用的问题可参考 GitHub 上讨论: "sourceMaps" option in babelrc has no effect · Issue #2484 · babel/babel