web-dev-qa-db-ja.com

ReactおよびWebpackを使用してBabel 6ステージ0をセットアップする方法

ドキュメントからの私の理解

Babel 6には現在のところ、es2015、react、stage-xの3つのプリセットがあることがわかります。 .babelrcで次のように設定できることを読みました。

{
  "presets": ["es2015", "react", "stage-0"]
}

またはpackage.JSONで直接：

{
  ...,
  "version": x.x.x,
  "babel": {
    "presets": ["es2015", "react", "stage-0"]
  },
  ...,
}

さらに、このようなwebpackでbabel-loaderを使用できます。

loader: 'babel?presets[]=es2015'


私の問題

すべてをナイスでクリーンにコンパイルするために、Babel6で動作するように更新されたbabel-loaderを次のようなwebpack構成に追加します。

module.exports = function(options) {
  var jsLoaders = ['babel?presets[]=es2015'];
  [...]
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: jsLoaders
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loaders: options.production ? jsLoaders : ['react-hot'].concat(jsLoaders)
      },
      [...]


今、コンパイル時にwithout.babelrcをルートまたはpackage.JSONで設定されたオプション、つまり、 webpack configで設定されたbabel-loader es2015プリセットReactコンポーネントクラスの静的propTypesに関する予期しないトークンエラーが表示されます。

ERROR in ./app/components/form/index.jsx
Module build failed: SyntaxError: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: Unexpected token (19:19)
  17 | // ES6 React Component:
  18 | export default class SurveyForm extends Component {
> 19 |   static propTypes = {
     |                    ^

GitHubで、これはstage-1機能、つまりtransform-class-propertiesであると言われました。そこで、stage-0をすぐに実装したいと思います。
BUT
上記のように.babelrcを追加するかpackage.JSONを定義して追加すると、非常に奇妙なビルド失敗エラーが発生します。

ERROR in ./app/components/form/index.jsx
Module build failed: Error: /Library/WebServer/Documents/yarsk.test/app/components/form/index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
    at NodePath.insertAfter (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/modification.js:181:13)
    at NodePath.replaceWithMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/replacement.js:92:8)
    at handleClassWithSuper (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:80:10)
    at PluginPass.Class (/Library/WebServer/Documents/yarsk.test/node_modules/babel-plugin-transform-class-constructor-call/lib/index.js:101:11)
    at newFn (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/visitors.js:233:27)
    at NodePath._call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:72:18)
    at NodePath.call (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:44:17)
    at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:102:12)
    at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
    at TraversalContext.visitSingle (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:111:19)
    at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:195:19)
    at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
    at NodePath.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/path/context.js:106:22)
    at TraversalContext.visitQueue (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:151:16)
    at TraversalContext.visitMultiple (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:106:17)
    at TraversalContext.visit (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/context.js:193:19)
    at Function.traverse.node (/Library/WebServer/Documents/yarsk.test/node_modules/babel-traverse/lib/index.js:139:17)
 @ ./app/index.jsx 9:0-28

または要するに：Module build failed: Error: /.../index.jsx: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

これが私が立ち往生しているところです。このようにbabel-loaderでコンパイルすることができたとき、私はこのコンポーネントをBabel5で書きました。

loader: 'babel?optional[]=runtime&stage=0

今、私は言及されたエラーをコンパイルしています。

  • これはbabel-loaderの問題ですか、それともbabelの問題ですか？
  • エラーをスローしないようにstage-0を設定する必要があるのはどこですか？


更新

プリセットセットを使用してコンパイルし、前述のクラスエクスポートバグの回避策を使用すると（作成後までクラスをエクスポートしないでください）、セットプリセットの順序によってエラーメッセージが変更されます。 stage-0を最初に設定すると、エラーは'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)になりますstage-0を2番目または3番目に配置すると、上記から構文エラーに関するメッセージが表示されます。


最新

これらのバグに関する最新の進歩については 私の投稿を参照 または phabricatorの新しいbabel課題追跡 詳細（基本的にコンパイルは6.2.1で修正されましたが、現在は他にも何かが起こっています）

この記事に記載されているすべてのバグは、Babel 6.3.xで完全に修正されています。問題が解決しない場合は、依存関係を更新してください。

reactjsconfigecmascript-6webpackbabeljs
50
Marian

ここで遭遇した2つの非常に大きなバグ、つまり静的プロパティを持つES6クラスの直接エクスポートとES6コンストラクターの問題については、このスレッドの回答で説明しています。 gitHubで明示的にここ（バグのエクスポート）およびここ（コンストラクターのバグ）で見つけることができます。。 （GitHub Issue Trackerは終了しました 問題、バグ、リクエストはここに移動しました 。）

これらは両方とも公式に確認されたバグであり、Babel 6.3.17以降に修正されました

（1つまたは2つ前、おそらく6.3.x以前ではなく、これは私が使用しているバージョンであり、すべてがBabel5の場合と同じように動作しています。皆さんのコーディングを楽しんでください。）

（レコードの場合：）

したがって、CLIで次のエラーメッセージが表示された場合：

We don't know what to do with this node type. We were previously a Statement but we can't fit in here?

このような静的プロパティを持つES6クラスまたは同様の方法でエクスポートする可能性があります（これは、拡張されているクラスに接続されているようではなく、静的プロパティ）：

import React, { Component, PropTypes } from 'react'

export default class ClassName extends Component {
  static propTypes = {...}
  // This will not get compiled correctly for now, as of Babel 6.1.4
}

簡単な回避策 Stryzhevskyiが述べたように とGitHubの数人：

import React, { Component, PropTypes } from 'react'

class ClassName extends Component {
  static propTypes = {...}
}
export default ClassName // Just export the class after creating it


2番目の問題は、次のエラーに関するものです。

'this' is not allowed before super() (This is an error on an internal node. Probably an internal error)

正当なルールであるにもかかわらず Dominic Tobiasが指摘したように これは確認済みのバグであり、独自のプロパティを持つ拡張クラスがこれまたは同様のメッセージをスローするようです。今のところ、この問題の回避策はありません。現時点では、多くの人がこの理由でBabel5にロールバックしました（6.1.4時点）。

おそらくこれはBabel 6.1.18のリリースで修正されたと思われます （上記のGitHubの問題を参照） しかし、私も含めて、人々は同じ問題が起こっているのをまだ見ています。

また、現時点ではbabelプリセットstage-x、react、およびes2015をロードする順序が重要であり、出力を変更する可能性があることに注意してください。

Babel 6.2.1以降

これらのバグは両方ともfixedであり、コードは正常にコンパイルされます。 しかし...おそらく、reactで作業する多くの人々に影響を及ぼし、実行時にReferenceError: this hasn't been initialised - super() hasn't been calledをスローする別の方法があります。 ここで参照 。乞うご期待...


Babel 6.3.17以降に完全に修正されました

（1つまたは2つ前、おそらく6.3.x以前ではなく、これは私が使用しているバージョンであり、すべてがBabel5の場合と同じように動作しています。皆さんのコーディングを楽しんでください。）

21
Marian

エクスポートをそのような構造に置き換えてみてください。

class SurveyForm extends Component {/*implementation*/}
export default SurveyForm
10
Stryzhevskyi

ここ は、Babel 6、React、Webpack、およびSequelizeの動作例です。

https://github.com/BerndWessels/react-webpack

基本的にこれは.babelrcです

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "env": {
    "development": {
      "plugins": [
        "babel-relay-plugin-loader",
        [
          "react-transform",
          {
            "transforms": [
              {
                "transform": "react-transform-hmr",
                "imports": [
                  "react"
                ],
                "locals": [
                  "module"
                ]
              },
              {
                "transform": "react-transform-catch-errors",
                "imports": [
                  "react",
                  "redbox-react"
                ]
              }
            ]
          }
        ]
      ]
    },
    "production": {
      "plugins": [
        "babel-relay-plugin-loader"
      ]
    }
  }
}

これらはモジュールのバージョンです

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

それは私のために働く。

3
Christine

同じ問題が発生した後、以下のWebPack構成を使用してReactでこれを機能させることができました。

module.exports = {
  entry: './app/Index.js',
  output: { path: __dirname, filename: 'dist/bundle.js' },
  module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'babel',
            query: {
                presets: ['react']
            }
        }
    ]
  }
};

Babel-preset-reactもインストールする必要がありました。

npm install --save-dev babel-preset-react

編集：もちろん、ES6を作成している場合は、ES2015プリセットも含める必要があります。

Babelのプリセットはここにあります： https://github.com/babel/babel/tree/development/packages

2
David

やってみました？：

presets: [{
    plugins: [
        'transform-class-properties'
    ]
}, 'stage-0', 'es2015', 'react']
1
Dominic

stage-1だけを使用してみましたか？

クエリプロパティを使用するとうまくいきました。

```
module: {
  loaders: [{
    test: /\.jsx?$/, 
    loader: 'babel',
    query: {
      presets: ['es2015', 'stage-1', 'react']
    }
  }]
}
```

もちろん、.babelrcとpackage.jsonのbabelオプションを使用することはできませんでした。 babel-*v6.0を把握しようとしています

0
sajinshrestha