本文介绍了目前尚未启用对实验性语法"classProperties"的支持(8:16).添加@ babel/plugin-proposal-class-properties的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我正在尝试编译我的React Native App,但出现以下错误:

I'm trying to compile my React Native App and I'm getting the following error:

如果我正确理解,由于它是一个本机应用程序,因此.babelrc文件将被忽略,但是仍然有一些方法可以解决该问题.我在网上看到了一些解决方案,但似乎没有一个适合我.

If I understand correctly, since it is a react native app, the .babelrc file is ignored, but there are still some ways to overcome that. I have seen a few solutions on the web but none seem to work for me.

我尝试过:

  • 在与package.json相同的文件夹中添加babel.config.js:
module.exports = {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        '@babel/preset-typescript'
    ],
    plugins: [
        '@babel/plugin-proposal-class-properties'
    ]
};

  • 将babel配置添加到package.json
  • {
        presets: [
            '@babel/preset-env',
            '@babel/preset-react',
            '@babel/preset-typescript'
        ],
        plugins: [
            '@babel/plugin-proposal-class-properties'
        ]
    }
    

    • 向插件添加松散属性:
    • "plugins": [
          [
            "@babel/plugin-proposal-class-properties",
            {
              "loose": true
            }
          ]
        ]
      

      似乎没有任何作用.

      package.json:

      package.json:

      {
        "name": "my-app",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "@material-ui/core": "^4.5.0",
          "@material-ui/icons": "^4.4.3",
          "@react-native-community/google-signin": "^3.0.1",
          "jquery": "^3.4.1",
          "react": "^16.10.2",
          "react-dom": "^16.10.2",
          "react-ga": "^2.7.0",
          "react-native-google-signin": "^2.1.0",
          "react-scripts": "3.2.0"
        },
        "scripts": {
          "start": "react-scripts start",
          "build": "react-scripts build",
          "test": "react-scripts test",
          "eject": "react-scripts eject"
        },
        "eslintConfig": {
          "extends": "react-app"
        },
        "browserslist": {
          "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
          ],
          "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
          ]
        },
        "babel": {
          "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
          ],
          "plugins": [
            [
              "@babel/plugin-proposal-class-properties",
              {
                "loose": true
              }
            ]
          ]
        },
        "devDependencies": {
          "@babel/cli": "^7.6.4",
          "@babel/core": "^7.6.4",
          "@babel/plugin-proposal-class-properties": "^7.5.5"
        }
      }
      
      

      babel.config.js:

      babel.config.js:

      module.exports = {
          plugins: [
              ['@babel/plugin-proposal-decorators', { legacy: true }],
              ['@babel/plugin-proposal-class-properties', { loose: true }],
              '@babel/plugin-syntax-dynamic-import',
              '@babel/plugin-transform-regenerator',
              [
                  '@babel/plugin-transform-runtime',
                  {
                      helpers: false,
                      regenerator: true,
                  },
              ],
          ],
          presets: [
              "@babel/preset-flow",
              'module:metro-react-native-babel-preset',
          ],
      };
      

      如果有人可以在这个伟大的问题上大放异彩,谢谢!

      If anyone can shine a light on the issue that would be great, Thank you!

      推荐答案

      根据[this GitHub] [1]问题,如果您使用create-react-app,则应复制 .babelrc babel.config.js 配置为 webpack.config.js 并删除这些配置.因为htis两行代码 babelrc:false,configFile:false,您在babelrc中的配置,..是没有用的.而webpack.config.js位于./node_madules/react-scripts/config文件夹中.您可以解决以下问题:

      According to [this GitHub][1] issue if you using create-react-app you should copy your .babelrc or babel.config.js configurations to webpack.config.js and delete those.because of htis two line of code babelrc: false,configFile: false, your config in babelrc,.. are useless. and your webpack.config.js is in your ./node_madules/react-scripts/config folder. you can solve the problem like this:

      {
                    test: /\.(js|mjs)$/,
                    exclude: /@babel(?:\/|\\{1,2})runtime/,
                    loader: require.resolve('babel-loader'),
                    options: {
                      babelrc: false,
                      configFile: false,
                      compact: false,
                      presets: [
                        [
                          require.resolve('babel-preset-react-app/dependencies'),
                          { helpers: true },
      
                        ],
                        '@babel/preset-env', '@babel/preset-react'
                      ],
                      plugins: ['@babel/plugin-proposal-class-properties'],
                      .
                      .
                      .
      

      或者您可以根据您的配置文件将 babelrc:false,configFile:false 更改为true.或者您可以弹出并执行此操作.

      or you can change babelrc: false,configFile: false, to true according to your config file.or you can eject and do this.

      这篇关于目前尚未启用对实验性语法"classProperties"的支持(8:16).添加@ babel/plugin-proposal-class-properties的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

      1403页,肝出来的..

09-06 11:59