Babel 配置 Source Maps

• 在命令行上配置
• 在 .babelrc 中配置
• 参考阅读

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