使用Webpack+Babel Loader编译React时遭遇语法错误求助

嘿，我一眼就看出问题所在了——你的Babel没配置React预设！babel-loader本身只是Webpack和Babel之间的桥梁，它需要明确知道怎么转译JSX这种React特有的语法，不然Webpack看到<Router>这种标签直接就懵了，所以才抛出了Unexpected token错误。

下面一步步帮你搞定：

1. 先装齐Babel预设包 #

你现在只装了babel-core和babel-loader，但缺了转译React和ES6+语法的核心预设。因为你用的是Babel 6.x版本（对应babel-core@6.26.0），得安装这两个依赖：

npm install --save-dev babel-preset-react babel-preset-env

2. 给Babel加配置，让它认识JSX #

最简单的方式是在项目根目录新建一个.babelrc文件，把预设规则写进去：

{
  "presets": ["env", "react"]
}

要是你不想单独建配置文件，也可以直接在webpack.config.js的babel-loader里内嵌配置：

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['env', 'react']
      }
    },
    'eslint-loader'
  ]
}

3. 别忘了给ESLint也加JSX支持 #

你的ESLint现在可能也认不出JSX语法，所以得配个.eslintrc文件（或者修改你现有的配置）：

{
  "parser": "babel-eslint",
  "extends": ["plugin:react/recommended"],
  "env": {
    "browser": true,
    "es6": true
  },
  "rules": {
    // 这里可以根据需求添加自定义规则，比如关闭某些严格检查项
  }
}

最后再检查两个小细节 #

• 虽然你的Webpack已经配置了识别.jsx后缀，但习惯上React组件文件用.jsx后缀会更清晰，你可以考虑把index.js改成index.jsx（当然不改也能正常运行）。
• 确认下webpack.config.js里的entry路径是不是真的指向了你的src/index.js，别不小心写错路径哦。

做完这些，重新运行编译命令，应该就能顺利把JSX转成浏览器能识别的普通JavaScript代码啦！

内容的提问来源于stack exchange，提问作者Elon Salfati