Webpack Babel 6 ES6デコレーター

ES6でwebpackを私のバンドラーとして作成したプロジェクトがあります。ほとんどのトランスパイルは問題なく動作しますが、デコレータをどこかに含めようとすると、次のエラーが発生します。

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

私はbabelの課題追跡を調べましたが、そこで何も見つけることができなかったので、間違って使用していると思います。私のwebpack設定（関連ビット）：

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

私は他に何も問題はありません、矢印関数、すべての構造を正常に解体すること、これが機能しない唯一のものです。

私はいつでも以前に動作していたbabel 5.8にいつでもダウングレードできることを知っていますが、これを現在のバージョン（v6.2.0）で動作させる方法がある場合は役立ちます。

このBabelプラグインは私にとってはうまくいきました：

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"],
    // ...
  ]
}

または

Webpack

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

リアクトネイティブ

react-nativeあなたが使用しなければならないbabel-preset-react-native-stage-0代わりに、プラグインを。

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

.babelrc

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

詳細については、この質問と回答をご覧ください。

babeljs slack webchatで5分間費やした後、現在のバージョンのbabel（v6.2）ではデコレーターが壊れていることがわかりました。現時点での唯一の解決策は、5.8にダウングレードすることです。

また、問題トラッカーをgithubからhttps://phabricator.babeljs.ioに移動したようです。

何時間も検索した結果、現在のドキュメントが非常に貧弱で不足していることがわかったので、私はこれらすべてを書き留めます。

インストールだけでbabel-plugin-transform-decorators-legacyはうまくいきませんでした（カルマと一緒に酵素を使用する構成があります）。インストール判明transform-class-properties：-変換クラスのプロパティともでドキュメントごとにクラスプラグインを変換する前に、従来のプラグインがあることを確認して作っ変換-デコレータレガシーは、最終的にそれが私のために働かせました。

私も.babelrcファイルを使用していませんが、これをkarma.conf.jsファイルに追加するとうまくいきました：

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

ローダーにも追加しました：

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"]
    }
  },

トランスフォームデコレータプラグインが必要なだけです：http : //babeljs.io/docs/plugins/transform-decorators/

プロジェクトをBabel 6からBabel 7にアップグレードした場合は、をインストールし@babel/plugin-proposal-decoratorsます。

Babel 5で使用されているレガシーデコレーターをサポートする場合は.babelrc、次のように構成する必要があります。

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

後者を使用する場合は、必ず@babel/plugin-proposal-decorators前@babel/plugin-proposal-class-propertiesに来てください。