npm start、package.json 和 webpack 的语法错误 [重复]答案

【问题标题】：Syntax error with npm start, package.json, and webpack [duplicate]npm start、package.json 和 webpack 的语法错误 [重复]
【发布时间】：2018-02-26 17:44:27
【问题描述】：

我试图简单地在 localhost 上启动我的程序，但 npm start 给了我以下错误（我认为它由于某种原因没有翻译 ES6）：

    ERROR in ./src/App.js
Module build failed: SyntaxError: Unexpected token (13:20)

  11 | 
  12 | export class App extends Component {
> 13 |   componentDidMount = () => {
     |                     ^
  14 |     this.props.actions.fetchArticles()
  15 |   }
  16 |   render() {

我可以假设我的 package.json 文件有问题。

我试过安装我能想到的每一个 npm。这是一个常见问题吗？

./package.json

{
  "name": "minimal-react",
  "version": "1.0.0",
  "description": "Minimal React.js starter kit for experiments.",
  "main": "./src/index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/BatenkovT/Minimal-React.git"
  },
  "keywords": [
    "react",
    "webpack",
    "starter-kit"
  ],
  "author": "BatenkovT",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-plugin-transform-es2015-spread": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.5.1"
  },
  "bugs": {
    "url": "https://github.com/BatenkovT/Minimal-React/issues"
  },
  "homepage": "https://github.com/BatenkovT/Minimal-React#readme",
  "directories": {
    "doc": "docs"
  }
}

【问题讨论】：

标签： javascript npm webpack

【解决方案1】：

你的方法声明是错误的。

变化：

export class App extends Component {
  componentDidMount = () => {               
    this.props.actions.fetchArticles()
  }
  // rest of your component

到

export class App extends Component {
  componentDidMount {               
    this.props.actions.fetchArticles()
  }
  // rest of your component

【讨论】：

虽然你可以定义没有箭头函数的componentDidMount，但这并不是一个错误
@ShubhamKhatri 使用此实现，错误将消失。您也不会失去任何想要的行为（即this 将指向该类）
错误会消失，我同意，但这不是语法错误。错误消失了，因为默认情况下绑定了生命周期方法，但是说你有自定义函数而不是 componentDidMount，你可以不写handleChange = (e) => {}，这是转换类属性语法。检查关于为什么 OP 收到此错误的重复问题
另外顺便说一句，你的语法似乎是错误的componentDidMount {，因为 componentDidMount 是一个函数而不是一个对象
不，语法是正确的。我每天都这样使用它。同样在自定义函数上，我使用这种语法。你为什么说这不是一个太好的方法？我不明白：o

【解决方案2】：

将componentDidMount方法声明改为：

export class App extends Component {
  componentDidMount () {
    this.props.actions.fetchArticles()
   }

   render() {

【讨论】：