Babel 是一个 JavaScript 编译器,通过语法转换器支持最新版本的 JavaScript,将其转译为能在旧版本浏览器或仅支持旧版本 JavaScript 的环境中能运行的脚本。

由于经过了这么一次转义,直接在浏览器或 Node.js 环境中运行的脚本将不再是我们最初所编写的代码了。因此,我们需要配置 Source Maps,从而可以在调试时能够继续调试我们原始编写的代码。

在命令行上配置

要在命令上配置 Babel 在生成 js 文件的同时生成对应的 Source Maps,我们可以用 -s--source-maps 选项,并以 trueinline 作为参数;也可以不提供任何参数,效果与 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