Comment configurer Babel 6 étape 0 avec React et Webpack

Ma compréhension de la documentation

je vois que Babel 6 a trois presets pour le moment: es2015, react et stage-X. J'ai lu que je peux mettre ceux de .babelrc comme ceci: 

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

ou directement dans l'emballage.JSON comme suit: 

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

je peux utiliser babel-loader avec webpack comme ceci: 

loader: 'babel?presets[]=es2015'



mon problème

donc pour compiler tout ce qui est beau et propre, j'ajoute babel-loader , qui vient d'être mis à jour pour fonctionner avec Babel6, à la configuration de 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, quand je compile sans .babelrc dans les options root ou les presets définis dans package.JSON , c'est-à-dire seulement avec le preset Babel-loader es2015 défini dans la config webpack je reçois une erreur de token inattendue sur les propTypes statiques ma classe React component: 

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 que c'est une caractéristique stage-1 , à savoir transform-class-properties . Je voudrais donc mettre en place stage-0 tout de suite.

mais

Quand je le fais en ajoutant .babelrc ou en définissant package.JSON comme ci-dessus, j'obtiens une erreur de build fail très étrange: 

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 ici que je suis coincé. 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 j'obtiens les erreurs mentionnées compilant.

  • S'agit-il d'un numéro babel-loader ou d'un numéro babel ?
  • Où dois-je configurer stage-0 pour qu'il ne des erreurs de lancer?



mise à Jour

lors de la compilation avec les presets définis et en utilisant la solution mentionnée pour le bogue d'exportation de classe (ne doit pas exporter de classe avant de l'avoir créé) l'ordre des presets définis modifie le message d'erreur. Quand j'ai mis stage-0 en premier l'erreur est maintenant 'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) Quand je mets stage-0 deuxième ou troisième je reçois le message d'erreur de syntaxe d'en haut.



dernier

Pour les dernières avancées concernant ces bugs voir mon post ou la nouvelle babel problème de tracker sur phabricator pour plus d'. (essentiellement la compilation est fixée au 6.2.1 mais il y a d'autres choses qui se passent maintenant)

tous les bogues mentionnés dans cet article sont complètement corrigés à partir de Babel 6.3.x. Veuillez mettre à jour vos dépendances si vous avez encore des problèmes.

48
demandé sur Community 2015-10-31 21:35:57

6 réponses

les deux bogues 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 thread et peuvent être trouvés sur GitHub explicitement ici (bogue d'exportation) et ici (bogue de constructeur) . (GitHub outil de suivi a été fermé et des questions, des bugs et des demandes ont été déplacés ici .)

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

(peut-être un ou deux plus tôt, pas avant 6.3.x, c'est la version sur laquelle je suis et tout fonctionne comme avec Babel5. Amusez-vous bien tout le monde.)

(pour les notices:)

donc si vous obtenez le message d'erreur suivant dans le CLI:

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

Chances êtes-vous exportez une classe ES6 avec une propriété statique comme celle-ci ou d'une manière similaire (notez que cela ne semble pas être relié à la classe étant étendu plus 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



la deuxième question porte sur l'erreur suivante:

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

bien qu'il s'agisse d'une règle légale comme L'a souligné Dominic Tobias il s'agit d'un bug confirmé où il semble que les classes étendues ayant leurs propres propriétés lanceront ceci ou un message similaire. Comme pour l'instant je n'ai pas vu de solution de contournement pour ce. Beaucoup de gens sont retournés à Babel5 pour ça. raison pour l'instant (6.1.4).

supposément cela a été corrigé avec la sortie de Babel 6.18 (voir ci-dessus GitHub issue) mais les gens, moi inclus, voient toujours le même problème exact se produire.



notez aussi que pour l'instant l'ordre dans lequel vous chargez les préréglages babel stage-x , react et es2015 semble être important et peut changer votre sortie.



à partir de Babel 6.2.1

ces deux bogues sont corrigé , le code compile fine. mais... il y a encore un autre qui affecte probablement beaucoup de personnes travaillant avec react, qui lance ReferenceError: this hasn't been initialised - super() hasn't been called à l'exécution. référencé ici . Restez à l'écoute...





Complètement fixé depuis Babel 6.3.17

(peut-être un ou deux plus tôt, pas avant 6.3.x, c'est la version sur laquelle je suis et tout fonctionne comme avec Babel5. Amusez-vous bien tout le monde.)

21
répondu Marian 2017-05-23 11:46:14

essayez de remplacer votre exportation par une telle construction: 

class SurveyForm extends Component {/*implementation*/}
export default SurveyForm
10
répondu Stryzhevskyi 2015-11-01 10:29:20

ici est un exemple de travail avec Babel 6, React, Webpack et Sequelize:

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

en gros, 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 

babel-core@6.3.17
babel-loader@6.2.0
babel-plugin-react-transform@2.0.0-beta1
babel-preset-es2015@6.3.13
babel-preset-react@6.3.13
babel-preset-stage-0@6.3.13

ça marche pour moi.

3
répondu Christine 2015-12-17 02:27:02

après avoir eu les mêmes problèmes, j'ai pu obtenir ce fonctionnement 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. 

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

modifier: bien sûr, vous pourriez encore avoir besoin d'inclure également le preset ES2015 si vous écrivez ES6 ainsi.

Babel Presets peut être trouvé ici: https://github.com/babel/babel/tree/development/packages

2
répondu David 2015-11-01 22:35:09

Avez-vous essayé?: 

presets: [{
    plugins: [
        'transform-class-properties'
    ]
}, 'stage-0', 'es2015', 'react']
1
répondu Dominic 2015-11-02 20:22:17

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

en utilisant la propriété query 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 les options .babelrc et babel dans package.json . J'essaie toujours de comprendre babel-*v6.0

0
répondu sajinshrestha 2015-11-11 21:24:27