Webpack Babel 6 ES6 Dekorateure

Ich habe ein Projekt in ES6 mit Webpack als Bundler geschrieben. Die meisten Transpilierungen funktionieren einwandfrei, aber wenn ich versuche, Dekorateure irgendwo einzuschließen, wird folgende Fehlermeldung angezeigt:

Decorators are not supported yet in 6.x pending proposal update.

Ich habe mir den Babel Issue Tracker angesehen und konnte dort nichts finden. Ich gehe also davon aus, dass ich ihn falsch verwende. Meine Webpack-Konfiguration (die relevanten Bits):

loaders: [
  {
    loader: 'babel',
    exclude: /node_modules/,
    include: path.join(__dirname, 'src'),
    test: /\.jsx?$/,
    query: {
      plugins: ['transform-runtime'],
      presets: ['es2015', 'stage-0', 'react']
    }
  }
]

Ich habe keine Probleme mit irgendetwas anderem, Pfeilfunktionen, die Zerstörung aller funktionieren gut, dies ist das einzige, was nicht funktioniert.

Ich weiß, ich könnte immer ein Downgrade auf Babel 5.8 durchführen, wo es vor einiger Zeit funktioniert hat, aber wenn es eine Möglichkeit gibt, dies in der aktuellen Version (v6.2.0) zum Laufen zu bringen, würde es helfen.

Dieses Babel-Plugin hat bei mir funktioniert:

https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

npm i --save-dev babel-plugin-transform-decorators-legacy

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
    ["transform-decorators-legacy"],
    // ...
  ]
}

oder

Webpack

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    cacheDirectory: true,
    plugins: ['transform-decorators-legacy' ],
    presets: ['es2015', 'stage-0', 'react']
  }
}

Native reagieren

Mit react-nativemüssen Sie babel-preset-react-native-stage-0stattdessen das Plugin verwenden.

npm i --save babel-preset-react-native-stage-0

.babelrc

{
  "presets": ["react-native-stage-0/decorator-support"]
}

Bitte lesen Sie diese Frage und Antwort für eine vollständige Erklärung.

Nachdem ich 5 Minuten im lockeren Webchat von babeljs verbracht hatte, stellte ich fest, dass Dekorateure in der aktuellen Version von babel (v6.2) kaputt sind. Die einzige Lösung scheint zu diesem Zeitpunkt ein Downgrade auf 5.8 zu sein.

Es scheint auch, dass sie ihren Issue-Tracker von Github auf https://phabricator.babeljs.io verschoben haben

Ich schreibe das alles auf, da ich nach stundenlangem Suchen die aktuelle Dokumentation als sehr schlecht und mangelhaft empfunden habe.

Nur zu installieren babel-plugin-transform-decorators-legacyhat bei mir nicht funktioniert (ich habe eine Konfiguration mit Enzym zusammen mit Karma). Es stellte sich heraus, dass die Installation von transform-class-properties: transform-class-properties und die Sicherstellung, dass das Legacy-Plugin vor dem Transformationsklassen-Plugin gemäß den Dokumenten in transform-decorators-Legacy steht, endlich für mich funktioniert haben.

Ich verwende auch keine .babelrcDatei, aber das Hinzufügen zu meiner karma.conf.jsDatei hat für mich funktioniert:

babelPreprocessor: {
  options: {
    presets: ['airbnb', 'es2015', 'stage-0', 'react'],
    plugins: ["transform-decorators-legacy", "transform-class-properties"]
  }
}

Ich habe es auch meinen Ladern hinzugefügt:

loaders: [
  {
    test: /\.js$/,
    loader: 'babel',
    exclude: path.resolve(__dirname, 'node_modules'),
    query: {
      presets: ['airbnb', 'es2015', 'stage-0', 'react'],
      plugins: ["transform-decorators-legacy", "transform-class-properties"]
    }
  },

Sie benötigen lediglich ein Plugin für Transformationsdekorateure: http://babeljs.io/docs/plugins/transform-decorators/

Wenn Sie Ihr Projekt von Babel 6 auf Babel 7 aktualisiert haben, möchten Sie es installieren @babel/plugin-proposal-decorators.

Wenn Sie ältere Dekorateure unterstützen möchten, wie sie in Babel 5 verwendet werden, müssen Sie Ihre .babelrcwie folgt konfigurieren :

plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
]

Stellen Sie sicher, dass dies für den Fall, dass Sie letzteres verwenden, @babel/plugin-proposal-decoratorsvorher erfolgt @babel/plugin-proposal-class-properties.