1. ホーム
  2. javascript

[解決済み] Webpack babel 6 ES6 デコレーター

2022-11-17 08:02:23

質問

ES6で書かれたプロジェクトで、bundlerとして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"],
    // ...
  ]
}

または

ウェブパック

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


React Native

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

こちらをご覧ください 質問と回答 をご覧ください。