在Babel转换之后和Webpack生成源图之前美化Javascript

Question

我在代码库中广泛使用async / await。但是，Webpack的源图不能与async / await或一般的生成器一起使用。通过生成由分号分隔的多行代码而不是换行符，Babel转换async / await。但是，在生成源映射时，Webpack将这些行视为一行（因为它们没有被换行符分隔）。当我在调试器中转到该行时，不清楚调试器的哪部分代码被暂停。

例如，这是我的一些代码：

  async fn() {
    ...
    this.links = this.links.concat(newLinks);
  }

巴贝尔的输出：

...
this.links = this.links.concat(newLinks);case 24:case 'end':return _context.stop();}}}, _callee, this, [[5, 14]]);}));

由于调试器将所有这些都视为一行，因此只要调试器在该行的任何部分暂停，整行就会突出显示。

在Webpack为它生成源图之前，有没有办法格式化Babel的输出？我想在每个分号后插入换行符。这样，上面的代码将被分成多行，并且调试器暂停的代码部分将更加清晰。

编辑：

我的.babelrc：

{
    "presets": [
        "es2015",
        "stage-0",
        "react"
    ],
    "plugins": ["transform-decorators-legacy"],
    "retainLines": true
}