用browserify babelify 6并且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 hook,同样的问题.

编辑

好的,所以我把它缩小到0级,在babeljs 6 ^中工作方式不同.

这是我注意到的:

运行文件

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的bug

看到

• 具有类属性的子类(没有构造函数)错误#2942
• [回归BUG]显示SyntaxError的类范围函数:在super()#2971之前不允许'this'

希望这会有一个快速修复.

编辑#2942没有引用同一个bug.以下是此错误的问题:#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"));