babelify 6 with browserify and the es2015 preset is not working
I am attempting to use the new babel release, and while trying to use the es2015 preset babel doesn't seem to be able to understand arrow functions?
My setup on pre-babel6 was as follows:
transform: [['babelify', {sourceMap: false, stage: 0, optional: 'runtime', ignore: ["*.min.js"]}]]
and with babel6
transform: [['babelify', {"presets": ["es2015"]}]]
which does not work. Why is this?
edit
adding "stage-0" got rid of the syntax error messages, but has stoped me from being able to extend anything with the error: 'this' is not allowed before super() when I have infact got a super() call.
edit
Set up a simple test application with some es7 and tried to use the babel-core require hook, same problem.
edit
Ok so I have narrowed it down to stage-0 working differently in babeljs 6^.
Here is what I have noticed:
Run file
require("babel-core/register")(
{
presets: ["es2015", "stage-0"]
}
);
require("./app.js");
Works with:
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();
Doesn't work with:
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();
So I am a little confused. Is this really incorrect syntax? How have I been able to use this pre-babel6?
This is a Babeljs bug
See
Hopefully this will see a fast fix.
edit #2942 is not referencing the same bug. Here is an issue following this bug: #3028
It depends a bit on how you are executing browserify, this is what the Github repository from babelify (https://github.com/babel/babelify) says about it :
From the CLI:
$ browserify script.js -o bundle.js
-t [ babelify --presets [ es2015 react ] ]
With Node:
browserify("./script.js")
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.pipe(fs.createWriteStream("bundle.js"));