web-dev-qa-db-ja.com

browserifyでbabelify6を実行し、es2015プリセットが機能しない

新しい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をどのように使用できましたか?

12
Julien Vincent

これはBabeljsのバグです

見る

うまくいけば、これは迅速な修正が見られるでしょう。

edit#2942は同じバグを参照していません。このバグに続く問題は次のとおりです。 #3028

7
Julien Vincent

それはあなたが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"));
4
Timon