web-dev-qa-db-fra.com

Comment configurer Babel 6 stage 0 avec React et Webpack

Ma compréhension des docs

Je vois que Babel 6 a pour l'instant trois préréglages: es2015, react et stage-x. J'ai lu que je peux définir ceux dans .babelrc Comme suit:

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

ou directement dans package.JSON comme ceci:

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

Je peux également utiliser babel-loader avec WebPack comme ceci:

loader: 'babel?presets[]=es2015'


Mon problème

Donc, pour tout compiler Nice and clean, j'ajoute babel-loader, Qui vient d'être mis à jour pour fonctionner avec Babel6, à la configuration du webpack comme ceci:

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


Maintenant, lorsque je compile sans .babelrc Dans la racine ou les options prédéfinies définies dans package.JSON, C'est-à-dire uniquement Avec le préréglage babel-loader es2015 défini dans la configuration webpack, une erreur de jeton inattendue concernant les propTypes statiques apparaît dans ma 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 = {
     |                    ^

Sur GitHub, on m'a dit qu'il s'agissait d'une fonctionnalité stage-1, À savoir transform-class-properties. Je voudrais donc implémenter immédiatement stage-0.
[~ # ~] mais [~ # ~]
Lorsque je le fais en ajoutant .babelrc Ou en définissant package.JSON Comme ci-dessus, j'obtiens une erreur très étrange d'échec de la construction:

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

Ou en bref: 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?

C'est là que je suis bloqué. J'ai écrit ce composant avec Babel5 quand j'ai pu compiler avec babel-loader comme ça et tout a bien fonctionné:

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

Maintenant, je reçois les erreurs mentionnées en compilant.

  • S'agit-il d'un problème babel-loader Ou d'un problème babel?
  • Où dois-je configurer stage-0 Pour qu'il ne génère pas d'erreurs?


Mise à jour

Lors de la compilation avec les préréglages définis et de l'utilisation de la solution de contournement mentionnée pour le bogue d'exportation de classe (la classe ne doit pas être exportée avant d'avoir été créée), l'ordre des préconfigurations définies modifie le message d'erreur. Lorsque je règle d'abord stage-0, L'erreur est maintenant 'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) Lorsque je mets stage-0 Deuxième ou troisième, je reçois le message concernant l'erreur de syntaxe ci-dessus.


Dernier

Pour les dernières avancées concernant ces bugs voir mon post ou le nouveau traqueur de problème de babel sur phabricator pour plus. (En principe, la compilation est corrigée à partir de la version 6.2.1, mais il se passe autre chose à présent)

Tous les bugs mentionnés dans cet article sont complètement corrigés à partir de Babel 6.3.x. Veuillez mettre à jour vos dépendances si vous rencontrez toujours des problèmes.

reactjsconfigecmascript-6webpackbabeljs
50
Marian

Les deux bugs assez lourds que j'ai rencontrés ici, à savoir l'exportation directe d'une classe ES6 avec une propriété statique et un problème avec le constructeur ES6 sont discutés dans les réponses de ce fil et peut être trouvé sur GitHub explicitement ici (bug d'exportation) et ici (bug constructeur). (GitHub Issue Tracker a été fermé et problèmes, bugs et demandes ont été déplacés ici .)

Ce sont deux bugs confirmés officiellement, corrigés depuis Babel 6.3.17

(Peut-être un ou deux plus tôt, pas avant la 6.3.x. C'est la version sur laquelle je suis et tout fonctionne comme dans Babel5. Heureux de coder tout le monde.)

(Pour les enregistrements:)

Donc, si vous obtenez le message d'erreur suivant dans 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?

Il est fort probable que vous exportiez une classe ES6 avec une propriété statique telle que celle-ci ou de manière similaire (notez que cela ne semble plus être connecté à la classe en cours d'extension, mais plutôt à une classe ayant une propriété statique) :

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 solution simple comme mentionné par Stryzhevskyi et plusieurs personnes sur GitHub:

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

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


Le deuxième problème concerne l'erreur suivante:

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

En dépit d'être une règle légitime comme l'a souligné Dominic Tobias il s'agit d'un bug confirmé dans lequel il apparaît que les classes étendues ayant leurs propres propriétés vont envoyer ce message ou un message similaire. Pour l'instant je n'ai vu aucune solution de contournement pour celui-ci. Beaucoup de gens sont revenus à Babel5 pour cette raison pour le moment (à partir de 6.1.4).

Soi-disant, cela a été corrigé avec la sortie de Babel 6.1.18 (voir ci-dessus numéro GitHub) mais les gens, moi inclus, voient toujours le même problème se reproduire.

Notez également que pour le moment, l'ordre dans lequel vous chargez les préréglages babel stage-x, react et es2015 Semble être important et peut modifier votre sortie.

À partir de Babel 6.2.1

les deux de ces bogues sont corrigés , le code est bien compilé. Mais ... il en existe encore un qui affecte probablement beaucoup de personnes travaillant avec, qui jette ReferenceError: this hasn't been initialised - super() hasn't been called à l'exécution. référencé ici . Restez à l'écoute...


Complètement corrigé depuis Babel 6.3.17

(Peut-être un ou deux plus tôt, pas avant la 6.3.x. C'est la version sur laquelle je suis et tout fonctionne comme dans Babel5. Heureux de coder tout le monde.)

21
Marian

Essayez de remplacer votre exportation par une telle construction:

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

Here est un exemple concret avec Babel 6, React, Webpack et Sequelize:

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

Fondamentalement, c'est le .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"
      ]
    }
  }
}

et ce sont les versions de module

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

Ça marche pour moi.

3
Christine

Après avoir eu les mêmes problèmes, j'ai pu utiliser cela avec React en utilisant la configuration WebPack ci-dessous.

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

J'avais aussi besoin d'installer babel-preset-react aussi.

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

EDIT: Bien sûr, vous devrez peut-être également inclure le préréglage ES2015 si vous écrivez également ES6.

Les préréglages Babel peuvent être trouvés ici: https://github.com/babel/babel/tree/development/packages

2
David

As-tu essayé?:

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

Avez-vous essayé d'utiliser juste stage-1?

Utiliser la propriété de requête a fonctionné pour moi.

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

Bien sûr, je n'ai pas pu utiliser .babelrc et les options de babel dans package.json. J'essaie toujours de comprendre babel-*v6.0

0
sajinshrestha