@babel/plugin-proposal-class-properties 仍然失敗，“classProperties 當前未啟用”

Question

嘗試使用@babel/plugin-proposal-class-properties 。

• https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-class-properties
• https://github.com/oblador/react-native-animatable#user-content-attention-seekers
• https://www.npmjs.com/package/react-native-animatable

一種

產生這個錯誤

Failed to compile.

./node_modules/react-native-animatable/createAnimatableComponent.js
SyntaxError: /Users/timothyw/Projects/beatthemarket/beatthemarket.reactnative-paper/beatthemarket.frontend/node_modules/react-native-animatable/createAnimatableComponent.js: Support for the experimental syntax 'classProperties' isn't currently enabled (133:24):

  131 |
  132 |   return class AnimatableComponent extends Component {
> 133 |     static displayName = `withAnimatable(${wrappedComponentName})`;
      |                        ^
  134 |
  135 |     static propTypes = {
  136 |       animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

乙

安裝和代碼如下所示。

噓

yarn add @babel/plugin-proposal-class-properties --dev

我的組件.js

...
<Animatable.View
 animation="pulse"
 easing="ease-out"
 iterationCount="infinite">
 <SocialButton
   onPress={signInWithGoogle}
   imageSource={IMAGES.GOOGLE}
   style={{
     container: themedStyles.googleIconContainer,
     image: themedStyles.googleIcon,
   }}
 />
</Animatable.View>
...

babel.config.js

module.exports = {
  presets: [ "module:metro-react-native-babel-preset", "@babel/preset-env", "@babel/preset-react" ],
  plugins: [ ["@babel/plugin-proposal-class-properties", {"loose": true}] ],
}

C

這些 SO 注釋似乎沒有幫助。

• https://github.com/babel/babel/issues/8577
• Babel 插件類屬性——React 箭頭函數
• 如何使用 React Native 制作心跳動畫？
• 當前未啟用對實驗性語法“classProperties”的支持 (8:16)。 添加@babel/plugin-proposal-class-properties

Answer 1

你必須安裝

npm install @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader

和

更改輸入和輸出

---

const path = require('path')        
module.exports = {
  entry: path.resolve(__dirname,'src', 'app.js'),
  output: {
    path: path.resolve(__dirname, "public","dist",'javascript'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults"
              }],
              '@babel/preset-react'
            ],
            plugins: [
              "@babel/plugin-proposal-class-properties"
            ]
          }
        }]
      }
    ]
  }
}

在文件webpack.config.js 中