reactjs - what - webpack react js

Cómo configurar Babel 6 etapa 0 con React y Webpack

Question

Mi comprensión de los documentos

Veo que Babel 6 tiene tres presets por ahora: es2015, react y stage-x. Leí que puedo configurarlos en .babelrc así:

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

o directamente en el paquete. JSON así:

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

Además puedo usar babel-loader con webpack como este:

loader: ''babel?presets[]=es2015''

Mi problema

Entonces, para compilar todo lo bueno y limpio, agrego babel-loader , que acaba de actualizarse para que funcione con Babel6, a la configuración del paquete web de esta manera:

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)
      },
      [...]

Ahora, cuando compilo sin .babelrc en la raíz o las opciones preestablecidas establecidas en package.JSON , es decir, solo con el preajuste babel-loader es2015 configurado en la configuración del paquete web, obtengo un error inesperado de token sobre tipos de prop estáticos en mi clase de componente 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 = {
     |                    ^

En GitHub me dijeron que esta es una característica de stage-1 , a saber, transform-class-properties . Así que me gustaría implementar la stage-0 inmediato.
PERO
Cuando lo hago agregando .babelrc o definiendo package.JSON como el anterior, obtengo un error de falla de compilación muy extraño:

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

O, en resumen: 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? 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?

Aquí es donde estoy atrapado. Escribí este componente con Babel5 cuando pude compilar con babel-loader así y todo funcionó bien:

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

Ahora obtengo los errores mencionados compilando.

• ¿Es este un problema de babel-loader , o un problema de babel ?
• ¿Dónde tengo que configurar la stage-0 para que no arroje errores?

Actualizar

Al compilar con los ajustes preestablecidos establecidos y usar la solución alternativa mencionada para el error de exportación de la clase (no debe exportar la clase hasta después de crearla), el orden de los ajustes preestablecidos cambia el mensaje de error. Cuando configuro primero la stage-0 el error ahora es ''this'' is not allowed before super() (This is an error on an internal node. Probably an internal error) Cuando pongo la stage-0 segundo o tercero recibo el mensaje sobre error de sintaxis desde arriba.

Último

Para obtener los últimos avances con respecto a estos errores, consulte mi publicación o el nuevo rastreador de problemas de babel en phabricator para obtener más información. (Básicamente, la compilación se corrige a partir de 6.2.1, pero ahora suceden otras cosas)

Todos los errores mencionados en este artículo están completamente corregidos a partir de Babel 6.3.x. Actualice sus dependencias si todavía tiene problemas.

Answer 1

¿Has intentado usar solo la stage-1 ?

Usar la propiedad de consulta funcionó para mí.

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

Por supuesto, no he podido usar las opciones .babelrc y babel en package.json . Todavía babel-*v6.0 tratando de descubrir babel-*v6.0

Answer 2

¿Has probado?:

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

Answer 3

Después de tener los mismos problemas, pude hacer que esto funcionara con React usando la siguiente configuración de WebPack.

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

También necesitaba instalar babel-preset-react también.

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

EDITAR: Por supuesto, es posible que aún necesite incluir también el preajuste ES2015 si también está escribiendo ES6.

Los Presets de Babel se pueden encontrar aquí: https://github.com/babel/babel/tree/development/packages

Answer 4

Intente reemplazar su exportación con tal construcción:

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

Answer 5

Los dos errores bastante pesados ​​que encontré aquí, a saber, la exportación directa de una clase ES6 con una propiedad estática y un problema con el constructor ES6 se discuten en las respuestas de este hilo y se pueden encontrar en GitHub explícitamente aquí (error de exportación) y aquí (error del constructor) . (GitHub Issue Tracker se ha cerrado y los problemas, errores y solicitudes se han trasladado aquí ).

Ambos son errores confirmados oficialmente, corregidos desde Babel 6.3.17

(Tal vez una o dos antes, no antes de 6.3.x, esta es la versión en la que estoy y todo funciona como estaba con Babel5. Feliz codificación para todos).

(Por los récords:)

Entonces, si recibe el siguiente mensaje de error en la CLI:

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

Es probable que esté exportando una clase ES6 con una propiedad estática como esta o de una manera similar (tenga en cuenta que esto ya no parece estar conectado a la clase que se está extendiendo, sino a una clase que tiene una propiedad estática) :

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
}

La solución simple mencionada por Stryzhevskyi y varias personas en GitHub:

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

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

El segundo problema es sobre el siguiente error:

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

A pesar de ser una regla legítima como lo señala Dominic Tobias, este es un error confirmado en el que parece que las clases extendidas que tienen sus propias propiedades arrojarán este o un mensaje similar. Por ahora no he visto ninguna solución para este. Mucha gente regresó a Babel5 por este motivo por ahora (a partir de 6.1.4).

Supuestamente, esto se solucionó con el lanzamiento de Babel 6.1.18 (consulte el problema de GitHub anterior), pero la gente, incluido yo, todavía ve que ocurre el mismo problema exacto.

También tenga en cuenta que por ahora el orden en el que carga los presets de babel stage-x , react y es2015 parece ser importante y puede cambiar su salida.

A partir de Babel 6.2.1

ambos errores son corregidos , el código se compila bien. Pero ... todavía hay otro que probablemente afecta a muchas personas que trabajan con react, que arroja ReferenceError: this hasn''t been initialised - super() hasn''t been called a ReferenceError: this hasn''t been initialised - super() hasn''t been called en tiempo de ejecución. Referenciado aquí Manténganse al tanto...

Completamente arreglado desde Babel 6.3.17

(Tal vez una o dos antes, no antes de 6.3.x, esta es la versión en la que estoy y todo funciona como estaba con Babel5. Feliz codificación para todos).

Answer 6

Here hay un ejemplo de trabajo con Babel 6, React, Webpack y Sequelize:

Here

Básicamente este es el .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"
      ]
    }
  }
}

y estas son las versiones del módulo

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

Funciona para mi.