Wie richte ich Babel 6 Stage 0 mit React und Webpack ein?

Mein Verständnis aus den Dokumenten

Ich sehe, dass Babel 6 vorerst drei Voreinstellungen hat: es2015, react und stage-x. Ich habe gelesen, dass ich diese in @ setzen ka.babelrc wie so:

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

oder direkt in package.JSON wie folgt:

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

Ich kann babel-loader mit dem folgenden Webpack weiter verwenden:

loader: 'babel?presets[]=es2015'


Mein Proble

So alles schön sauber zu kompilieren füge ich hinzubabel-loader, das gerade aktualisiert wurde, um mit Babel6 zu arbeiten, in die Webpack-Konfiguration wie folgt:

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


Jetzt wenn ich kompiliereohn .babelrc in root oder Presets-Optionen inpackage.JSON, d. h. nur mit dem in der Webpack-Konfiguration festgelegten babel-loader es2015-Preset erhalte ich einen unerwarteten Token-Fehler bezüglich statischer propTypes in meiner React-Komponentenklasse:

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 = {
     |                    ^

uf GitHub habe ich erfahren, dass dies ein @ isstage-1 feature, nämlichtransform-class-properties. Also würde ich gerne @ implementierstage-0 jetzt sofort
ABE
Wenn ich das tue, füge ich @ hin.babelrc oder Definieren vonpackage.JSON wie oben bekomme ich einen sehr seltsamen Buildfehler:

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

Oder kurz: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?

ier stecke ich fes Ich habe diese Komponente mit Babel5 geschrieben, als ich in der Lage war, mit Babel-Loader wie folgt zu kompilieren und alles hat gut funktioniert:

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

Nun bekomme ich die genannten Fehler beim Kompilieren.

Ist das einbabel-loader Problem oder einbabel ProblemWo muss ich @ konfigurierstage-0 damit es keine Fehler wirft?


Aktualisiere

Beim Kompilieren mit festgelegten Voreinstellungen und Verwenden der angegebenen Problemumgehung für den Klassenexportfehler (Klassen dürfen erst nach dem Erstellen exportiert werden) ändert sich durch die Reihenfolge der festgelegten Voreinstellungen die Fehlermeldung. Wenn ich @ einstelstage-0 zuerst ist der Fehler jetzt'this' is not allowed before super() (This is an error on an internal node. Probably an internal error) Wenn ichstage-0 zweites oder drittes Ich erhalte die Meldung über Syntaxfehler von oben.


Neuest

ür die neuesten Fortschritte in Bezug auf diese Fehlsehe meinen Beitrag oderthe new babel issue tracker on phabricator für mehr. (Grundsätzlich ist das Kompilieren seit 6.2.1 behoben, aber es passieren gerade andere Dinge)

Alle in diesem Artikel erwähnten Fehler sind ab Babel 6.3.x vollständig behoben. Bitte aktualisieren Sie Ihre Abhängigkeiten, wenn Sie weiterhin Probleme haben.

Antworten auf die Frage(12)

Ihre Antwort auf die Frage