关于 gulp-istanbul 无法解析 async/await 的问题

查看原文
最近，在使用 Gulp 执行 Mocha 单元测试并生成测试覆盖率报告时执行一直出错，出错的原因是因为代码解析时出现不能识别的代码。这篇博客记录了问题的原因及我最后选择的处理办法。

现象

我使用 gulp-mocha 和 gulp-istanbul 插件执行单元测试并生成代码覆盖率报告，对应 gulpfile.js 中的内容如下：

const istanbul = require('gulp-istanbul');
const mocha = require('gulp-mocha');

gulp.task('pre-test', function () {
  return gulp.src(['src/**/*.js'])
    .pipe(istanbul())
    .pipe(istanbul.hookRequire());
});

gulp.task('test', ['pre-test'], function () {
  return gulp.src(['test/unit/**/*.test.js'])
    .pipe(mocha())
    .pipe(istanbul.writeReports())
    .pipe(istanbul.enforceThresholds({ thresholds: { global: 90 } }));
});

上面的内容是 gulp-istanbul 插件文档中的示例用法，然而在执行时却出错了，主要的错误信息如下图所示。

查看原文

从上图中可以看出，出错的原因是出现了无法解析的字符，在查看了对应了代码后发现无法解析的是 async/await。

原因

在发现 gulp-istanbul 无法解析 async/await 之后，我通过 Google 查找了相关资料，最后在 istanbul 的一个 issue 中找到了问题的原因所在：gulp-istanbul 依赖了 istanbul，而最新版本的 istanbul 无法解析 async/await，需要将 istanbul 升级到下一个版本，详情戳这里。

我通过 npm i -D istanbul@next 命令将 istanbul 升级到下一个版本，然后单独的生成代码覆盖率报告，发现确实可以成功解析 async/await。然而，gulp-istanbul 插件依赖的是 istanbul 最新发布的稳定版本，该版本并不能解析 async/await。

于此同时，我在 gulp-istanbul 的 issue 中也发现了有人提出了同样的问题。作者在 issue 中指出了稳定版的 istanbul 不支持 ES6，需要提供一个插装器。但是，我按照文档的示例添加插装器后，仍然无法解决该问题。该 issue 的提出者也表示了该方法并不能起作用，并希望 gulp-istanbul 的作者更新依赖的 istanbul 到下一个版本，然而作者表示没有时间去支持一个不稳定的版本，很乐意接受 PR。