web-dev-qa-db-ja.com

Webpack babel 6 ES6デコレーター

WebpackをバンドルとしてES6で記述されたプロジェクトがあります。ほとんどのトランスパイリングは正常に機能しますが、デコレータをどこにでも挿入しようとすると、このエラーが発生します。

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）で動作させる方法があれば役立つでしょう。

javascriptwebpackecmascript-6babeljsdecorator
100
Pavlin

この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"]
}

完全な説明については、こちらをご覧ください 質問と回答 .

170
Kyle Finley

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

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

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

41
Pavlin

babel-plugin-transform-decorators-legacyのみをインストールしてもうまくいきませんでした（カルマと一緒に酵素を使用する構成があります）。 transform-class-properties： transform-class-properties をインストールし、ドキュメントに従って、レガシープラグインがトランスフォームクラスプラグインの前にあることを確認します。 in transform-decorators-legacy が最終的にそれを機能させました。

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

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

3
yetone

プロジェクトを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の前に来るようにしてください。

1
John Kennedy