如何阻止Class转译为构造函数？Flow+Babel下instanceof问题求助

1. 修复Error子类的instanceof异常问题 #

你遇到的instanceof识别失效，是因为Babel转译ES6 class继承内置对象（比如Error）时会出现原型链异常：调用super(message)时，内置的Error构造函数会返回一个独立对象，导致子类实例的原型并没有指向子类的prototype，最终让instanceof无法正确判断实例归属。

最简单的修复方式是在子类构造函数里手动修正原型链：

/* @flow */
class BadRequestError extends Error {
  constructor(message:string) {
    super(message);
    // 修复原型链，让instanceof正常工作
    Object.setPrototypeOf(this, BadRequestError.prototype);
  }
}

class InvalidRequestBodyError extends Error {
  constructor(message:string) {
    super(message);
    Object.setPrototypeOf(this, InvalidRequestBodyError.prototype);
  }
}

这样处理后，new BadRequestError('test') instanceof BadRequestError就会返回预期的true了。

如果你不想手动修改每个子类构造函数，也可以添加babel-plugin-transform-builtin-extend插件，它会自动处理内置对象继承的原型链问题。

2. 阻止Babel将Class转译为ES5构造函数 #

要让Babel保留原生ES6 Class语法，只需要调整@babel/preset-env的targets配置，指定你的目标环境原生支持Class即可。比如你的Node.js应用，如果使用的Node.js版本在12及以上（原生支持Class），可以这样修改Babel配置：

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current" // 也可以指定具体版本，比如"node": "12"
      }
    }],
    "flow"
  ],
  "plugins": [
    "transform-flow-strip-types"
  ]
}

当preset-env检测到目标环境原生支持Class时，就不会对Class语法进行转译，直接保留原生写法。如果使用的是新版@babel/preset-env（替代旧版babel-preset-env），目标环境的检测会更精准。

内容的提问来源于stack exchange，提问作者modernator