babel loader 无法识别 React 应用程序中的 ES6 代码答案

【问题标题】：babel loader not recognizing ES6 code in React appbabel loader 无法识别 React 应用程序中的 ES6 代码
【发布时间】：2019-03-29 15:15:03
【问题描述】：

我正在尝试使用 react 应用程序设置 webpack。就我而言，我没有使用 create-react-app，所以我正在尝试自己设置。我看到了这个错误：

Not recognizing member declaration

还有这个：

Not recognizing ()=> syntax

This is what I have in package.json: 

  {
      "name": "testapp",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "webpack": "webpack"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0"
      }
    }

这是我的 webpack.config.js：

module.exports = {
    mode: 'development',
    context: __dirname,
    entry: './index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }, 
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/, 
                exclude: /(node_modules)/, 
                use: {
                    loader: 'babel-loader', 
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]

    }
}

这是用于我的组件的代码：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {

    state = {
        posts: []
    }


    componentDidMount = () => {
        const posts = fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => alert(data))

    }

    render() {
        return (
            <div>this is home</div>    
        )
    }
}

export default App

我还是 webpack 和加载器的新手，所以任何帮助都非常感谢。

【问题讨论】：

标签： javascript reactjs webpack babeljs babel-loader

【解决方案1】：

把你的代码改成

componentDidMount(){
        const posts = fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => alert(data))

}

【讨论】：

但我还想将() => 语法用于其他功能。其他 state = {} 语法也不起作用

【解决方案2】：

尝试使用babel class properties plugin。

【讨论】：

谢谢克里斯托弗 :)

【解决方案3】：

babel 等需要是你 package.json 中的 devDependencies。尝试将 babel-polyfill 添加到您的开发依赖项中。

【讨论】：

我刚刚注意到您的 package.json 将 babel 等定义为“依赖项”，但这些是“devDependencies”......依赖项被打包以在客户端使用，而 devDependencies 仅在编译期间使用过程（生成你的包）