React，babel，webpack 不解析 jsx 代码答案

【问题标题】：React, babel, webpack not parsing jsx codeReact，babel，webpack 不解析 jsx 代码
【发布时间】：2016-02-04 05:37:15
【问题描述】：

webpack.config.js

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html",
  },
  resolve: {
   extensions: ['', '.js', '.jsx']
 },
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
    ],
  },
}

package.json

{
  "name": "react-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.0.15",
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "file-loader": "^0.8.4",
    "webpack": "^1.12.2"
  },
  "dependencies": {
    "react": "^0.14.2"
  }
}

app/app.js

import React from "react";
import Greeting from "./greeting";

React.render(
  <Greeting name="World"/>,
  document.body
);

我在四处搜索后看到了完全相同的问题，但似乎没有一个答案适用于我。运行webpack 时出现以下错误：

./app.js 中的错误
模块构建失败：SyntaxError: path/to/project/react-webpack-project/app/app.js: Unexpected token (5:2)

React.render(
  <Greeting name="World"/>,
  document.body
);

我不确定为什么我仍然收到此错误。我猜它与我的 webpack.config.js 文件有关，但不是 100% 是什么问题。

【问题讨论】：

你试过这个解决方案了吗？ link
我认为问题在于您定义了多个加载器；在下面查看我的答案——我认为使用 .babelrc 文件就可以解决问题！

标签： javascript node.js reactjs webpack babeljs

【解决方案1】：

你需要给你的 babel-loader 添加预设：

{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        presets: ['es2015', 'react']  
},

http://babeljs.io/docs/plugins/#presets

【讨论】：

【解决方案2】：

首先：如果你使用 React v^0.14，你应该使用 React-Dom 渲染你的代码。 https://www.npmjs.com/package/react-dom

其次，这应该可以解决您的问题： babel-loader jsx SyntaxError: Unexpected token

【讨论】：

我正在关注使用这种打包方法的复数教程。我将尝试使用这种新的包装方式进行跟进。即使按照第二个链接中的说明，我也无法让它工作。
太糟糕了:(。让我们尝试一下：尝试使用低于 6.0.0 的 Babel 版本
第二个链接也没有帮助我。哪里有完整的 webpack/jsx/react hello world？

【解决方案3】：

我目前正在使用 React 0.14.3。 ReactDOM 解决方案不起作用，也没有将 babel 预设添加到 webpack.config.js 中。基本上，这些解决方案似乎只有在您定义了一个加载器时才有效，但我同时拥有 babel-loader 和 react-hot 加载器。

DID 的工作是安装 babel react 预设模块：

npm install babel-preset-react

然后在我的项目目录中创建一个 .babelrc 文件，内容如下：

{
  "presets": ['react']
}

这记录在http://babeljs.io/docs/plugins/preset-react/，正如Abhinav Singi所指出的那样

【讨论】：

我已经尝试了几个小时，谢谢这为我解决了这个问题。

【解决方案4】：

对我来说，答案是在查询块中包含预设：

query: {
  presets: ['react', 'es2015']
}

【讨论】：

【解决方案5】：

这有助于我解决这个问题。

在同一目录 webpack.config.js 上创建新文件 .babelrc。将此添加到.babelrc

  {
  "stage": 2,
  "env": {
    "development": {
      "plugins": [
        "react-display-name",
        "react-transform"
      ],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals":  ["module"]
          }]
        }
      }
    }
  }
}

【讨论】：