transform-b​​uiltin-extend 似乎不起作用

Question

我的翻译有误 class:

Uncaught TypeError: Failed to construct 'FormData': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

at Form.ExtendableBuiltin (http://local.yandex.ru:30002/bundle.js:79395:14)
at new Form (http://local.yandex.ru:30002/bundle.js:79422:103)

我的.babelrc:

{
    "presets": ["react", "latest"],
    "plugins": [
        "babel-plugin-syntax-decorators",
        "babel-plugin-transform-decorators-legacy",
        ["babel-plugin-transform-builtin-extend", { // Class Extending Natives
            globals: ["FormData"],
            approximate: true
        }],
        "transform-es2015-arrow-functions",
        // "syntax-async-functions",
        // "transform-async-to-generator",
        // "transform-regenerator",
        "transform-object-rest-spread",
        "transform-rebem-jsx",
        "transform-es2015-typeof-symbol"
    ],
}

我的class:

import map from 'lodash/map'

export default class Form extends FormData {
    constructor (data) {
        super()
        map(data, (val, key) => this.append(key, val))
    }
}

一段转译代码：

function _extendableBuiltin(cls) {
    function ExtendableBuiltin() {
        cls.apply(this, arguments);
    }

其中 cls 是 FormData。

预期是这样的：

function _extendableBuiltin(cls) {
    return function ExtendableBuiltin() {
        return new cls(arguments);
    }

babel --version 6.14.0 (babel-core 6.14.0)

webpack --version 版本：webpack 1.13.2

我做错了什么？

Answer 1

您必须将 approximate 选项设置为 false。来自 the plugin GitHub repository:

On older browsers that do not support reassigning the prototype of an existing object, you will need to enable the approximate mode, which will fall back to the Babel 5 behavior of using simple ES5 inheritance to approximate extending a class, though your results may vary depending on your goals.