Webpack+Babel-loader打包React报错：JSX语法无法解析

嘿，这个问题我太熟了——本质是你的Babel配置缺少处理React JSX语法的预设，导致babel-loader没法把JSX转译成浏览器能识别的普通JavaScript代码。

问题根源分析 #

你目前只安装了babel-preset-env，它负责转译ES6+的原生JavaScript语法，但完全不知道JSX是什么。JSX是React特有的语法糖，必须用专门的Babel预设来解析转换。

一步步解决问题 #

步骤1：安装React专属的Babel预设 #

因为你的Babel版本是6.x（从babel-cli@6.26.0可以看出来），所以要安装对应版本的babel-preset-react：

npm install babel-preset-react@6 --save-dev

另外，如果你还没安装Webpack（你的package.json里没列这个依赖），得装对应版本的Webpack（babel-loader@7只兼容Webpack 3.x）：

npm install webpack@3 --save-dev

步骤2：配置Babel识别React预设 #

有两种配置方式，选一种就行：

方式A：在package.json里添加Babel配置

打开你的package.json，在末尾追加一个babel字段：

{
  // 原有内容...
  "babel": {
    "presets": ["env", "react"]
  }
}

方式B：创建单独的.babelrc配置文件

在项目根目录新建.babelrc文件，内容如下：

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

步骤3：优化Webpack配置（可选但更严谨） #

虽然Babel会自动读取上面的配置，但你也可以在Webpack的loader里明确指定预设，避免缓存或配置读取问题：

module.exports = {
  entry: "./public/js/app.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js$/, 
        loader: 'babel-loader',
        presets: ['env', 'react'] // 新增这行，明确指定预设
      }
    ]
  }
}

步骤4：添加打包脚本并测试 #

在package.json的scripts里新增打包命令：

"scripts": {
  "start": "node server.js",
  "build": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
}

现在删除依赖缓存，重新安装依赖并打包：

rm -rf node_modules
npm install
npm run build

这样Webpack就能正常识别并转译JSX语法了！

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