babelify 6 与 browserify 和 es2015 预设不起作用

Question

我正在尝试使用新的 babel 版本，在尝试使用 es2015 预设 babel 时似乎无法理解箭头函数？

我在 pre-babel6 上的设置如下：

transform: [['babelify', {sourceMap: false, stage: 0, optional: 'runtime', ignore: ["*.min.js"]}]]

和 babel6

transform: [['babelify', {"presets": ["es2015"]}]]

这不起作用。这是为什么呢？

编辑

添加"stage-0" 消除了语法错误消息，但使我无法扩展任何带有错误的内容：'this' is not allowed before super() 当我实际上接到super() 电话时。

编辑

用一些 es7 设置一个简单的测试应用程序，并尝试使用 babel-core 的 require 钩子，同样的问题。

编辑

好的，所以我已将其范围缩小到在 babeljs 6^ 中以不同方式工作的 stage-0。

这是我注意到的：

运行文件

require("babel-core/register")(
    {
        presets: ["es2015", "stage-0"]
    }
);

require("./app.js");

适用于：

class extendable {
    constructor() {
        console.log('extended')
    }
}

class app extends extendable {

    constructor() {

        super();

        this.method();
        this.method2();
    }

    method() {
        // arrow functions
        setTimeout(() => {
            console.log("works")
        }, 1000)
    }

    /**
     * arrow function method
     */
    method2 = () => {
        console.log('works')
    }
}
new app();

不适用于：

class extendable {
    constructor() {
        console.log('extended')
    }
}

class app extends extendable {

    constructor() {

        super();

        this.method();
        this.method2();
    }

    method() {
        // arrow functions
        setTimeout(() => {
            console.log("works")
        }, 1000)
    }

    /**
     * arrow function method
     */
    method2 = () => {
        // give an error: 'this' is not allowed before super()
        this.state = "hello";
    }
}
new app();

所以我有点困惑。这真的是不正确的语法吗？我是如何使用这个 pre-babel6 的？

Answer 1

这是一个 Babeljs 错误

见

• Subclasses with class properties (without constructor) error #2942
• [Regression BUG] Class scoped function showing SyntaxError: 'this' is not allowed before super() #2971

希望这会得到快速修复。

edit #2942 没有引用相同的错误。这是此错误之后的一个问题：#3028

Answer 2

这在一定程度上取决于您执行 browserify 的方式，这就是 babelify (https://github.com/babel/babelify) 的 Github 存储库所说的：

来自 CLI：

$ browserify script.js -o bundle.js \
-t [ babelify --presets [ es2015 react ] ]

带节点：

browserify("./script.js")
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"));