新しい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に絞り込みました。
これが私が気づいたことです:
ファイルを実行
_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をどのように使用できましたか?
これはBabeljsのバグです
見る
うまくいけば、これは迅速な修正が見られるでしょう。
edit#2942は同じバグを参照していません。このバグに続く問題は次のとおりです。 #3028
それはあなたがbrowserifyをどのように実行しているかに少し依存します、これはbabelifyからのGithubリポジトリ( https://github.com/babel/babelify )がそれについて言っていることです:
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"));