Как настроить Babel 6 этап 0 с помощью React and Webpack

Мое понимание из документов

Я вижу, что Babel 6 имеет три предустановки: es2015, response и stage-x. Я читал, что я могу установить те, что в .babelrc следующим образом:

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

или непосредственно в пакете. JSON:

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

Я могу использовать babel-loader с webpack следующим образом:

loader: 'babel?presets[]=es2015'

Моя проблема

Итак, чтобы скомпилировать все красивое и чистое, я добавляю babel-loader, который только что был обновлен для работы с Babel6, в конфигурацию 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)
      },
      [...]

Теперь, когда я компилирую без .babelrc в настройках root или пресетов, установленных в package.JSON, то есть только с предустановленной установкой babel-loader es2015, установленной в конфигурации webpack, я получаю неожиданную ошибку токена о static propTypes в мой класс компонентов React:

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.
НО
Когда я делаю это, добавляя .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?

Вот где я застрял. Я написал этот компонент с Babel5, когда мне удалось скомпилировать с помощью babel-loader, и все было хорошо:

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

Теперь я получаю указанные компиляции ошибок.

Это проблема babel-loader или проблема babel?
Где мне нужно настроить stage-0, чтобы он не бросить ошибки?

Update

При компиляции с настройками пресетов и использованием упомянутого обходного пути для ошибки экспорта класса (не должен экспортировать класс до момента его создания) порядок заданных пресетов изменяет сообщение об ошибке. Когда я устанавливаю stage-0, сначала ошибка теперь 'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) Когда я помещаю stage-0 второй или третий, я получаю сообщение о синтаксической ошибке сверху.

Последние

Для последних достижений в отношении этих ошибок см. мой пост или новый трекер проблем с буфером на фабрикатора. (В основном компиляция исправлена с 6.2.1, но теперь происходят другие вещи)

Все ошибки, упомянутые в этой статье, полностью исправлены с Babel 6.3.x. Обновите свои зависимости, если у вас все еще есть проблемы.

Ответ 1

Два довольно тяжелых ошибки, которыми я столкнулся здесь, а именно прямой экспорт класса ES6 со статическим свойством и проблема с конструктором ES6 обсуждаются в ответах этого потока ~~и могут быть найдены на GitHub явно здесь (ошибка экспорта) и здесь (ошибка конструктора)~~. (GitHub Issue Tracker был закрыт и проблемы, ошибки и запросы переместились здесь.)

Это оба официально подтвержденные ошибки, исправленные с Babel 6.3.17

(Возможно, один или два раньше, а не до 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
}

Простой обходной путь как упоминал Стрижевский и несколько человек на GitHub:

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

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

Вторая проблема связана со следующей ошибкой:

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

Несмотря на то, что он является законным правилом как указал Доминик Тобиас, это подтвержденная ошибка, когда, как представляется, расширенные классы, имеющие свои свойства, будут бросать это или подобное сообщение, На данный момент я не видел никаких обходных решений для этого. На данный момент многие люди откатываются в Babel5 по этой причине (начиная с 6.1.4).

Предположительно это было исправлено с выпуском Babel 6.1.18 ~~(см. выше проблема GitHub)~~, но люди, включая меня, все еще видят ту же самую точную проблему.

Также обратите внимание, что на данный момент порядок загрузки загрузочных пресетов stage-x, react и es2015 кажется важным и может изменить ваш результат.

Как по Babel 6.2.1

обе эти ошибки исправлены, код компилируется в порядке. Но... есть еще один, который, вероятно, влияет на многих людей, работающих с реагированием, что бросает ReferenceError: this hasn't been initialised - super() hasn't been called во время выполнения. Ссылка здесь. Будьте на связи...

Полностью исправлено с Babel 6.3.17

Ответ 2

Попробуйте заменить ваш экспорт такой конструкцией:

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

Ответ 3

Здесь - рабочий пример с 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]

Это работает для меня.

Ответ 4

После того, как у меня были те же проблемы, я смог получить эту работу с React, используя приведенную ниже конфигурацию WebPack.

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

РЕДАКТИРОВАТЬ: Конечно, вам, возможно, также потребуется включить предустановку ES2015, если вы также пишете ES6.

Babel Presets можно найти здесь: https://github.com/babel/babel/tree/development/packages

Ответ 5

Вы пробовали?:

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

Ответ 6

Вы пытались использовать только stage-1?

Использование свойства запроса сработало для меня.

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

Конечно, я не смог использовать опции .babelrc и babel в package.json. Все еще пытаюсь выяснить babel-*v6.0