Javascript 网页包babel加载程序无法编译jsx

我正在尝试运行一个简单的样板，用于react+webpack+热模块替换。但实际上我被困在babel/jsx步骤中，需要帮助。我跟在后面

目前我有：

webpack.config.js

：

module.exports = {
  context: __dirname + "/app",
  entry: "./app.js",

  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      }
    ],
  },
}

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

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

import React from "react";

export default React.createClass({
  render: function() {
    return (
      <div className="greeting">
        Hello, {this.props.name}!
      </div>
    );
  },
});

app/app.js

：

module.exports = {
  context: __dirname + "/app",
  entry: "./app.js",

  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      }
    ],
  },
}

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

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

import React from "react";

export default React.createClass({
  render: function() {
    return (
      <div className="greeting">
        Hello, {this.props.name}!
      </div>
    );
  },
});

在

package.json中：

  "devDependencies": {
    "babel-core": "^6.18.0",
    "babel-loader": "^6.2.7",
    "webpack": "^1.13.3"
  },
  "dependencies": {
    "react": "^15.3.2"
  }

当我在控制台中运行webpack

时，正如教程所说，它应该运行webpack（和下面的babel）并捆绑整个应用程序，但它没有-相反，它抛出以下错误：

$ webpack
Hash: 9a56cc72acac2de6f40c
Version: webpack 1.13.3
Time: 543ms
    + 1 hidden modules

ERROR in ./app.js
Module build failed: SyntaxError: C:/Users/abc/Tests/webpack-react-hmr/app/app.js: Unexpected token (7:2)

   5 |
   6 | React.render(
>  7 |   <Greeting name="World"/>,
     |   ^
   8 |   document.body
   9 | );
  10 |

---

要修复webpack/jsx/babel设置，我应该怎么做？

您需要babel预设来编译

react

和其他ES6、ES7功能

所需预设的列表：

最近的

反应

第0阶段

将此文件作为

.babelrc

添加到您的根目录

{
 "presets": ["latest", "react", "stage-0"],
}

然后进行此安装

npm install --save-dev babel-preset-latest babel-preset-react babel-preset-stage-0

---

现在，运行webpack。它应该有用

您需要安装巴别塔。这是编译jsx文件的关键

首先安装它：

npm i -D @babel/preset-react @babel/preset-env @babel/core babel-loader @babel/plugin-proposal-class-properties

然后创建以下文件，并按如下方式设置配置

/
  .babelrc
  webpack.config.js

.babelrc

文件：

{
  "presets": [
 [ "@babel/preset-env", {
   "modules": false,
   "targets": {
  "browsers": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Safari versions",
    "last 2 iOS versions",
    "last 1 Android version",
    "last 1 ChromeAndroid version",
    "ie 11"
  ]
   }
 } ],
 "@babel/preset-react"
  ],
  "plugins": [ "@babel/plugin-proposal-class-properties" ]
}

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_module/,
                use: 'babel-loader'
            },
        ]
    }
};

webpack.config.js

文件：

{
  "presets": [
 [ "@babel/preset-env", {
   "modules": false,
   "targets": {
  "browsers": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Safari versions",
    "last 2 iOS versions",
    "last 1 Android version",
    "last 1 ChromeAndroid version",
    "ie 11"
  ]
   }
 } ],
 "@babel/preset-react"
  ],
  "plugins": [ "@babel/plugin-proposal-class-properties" ]
}

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_module/,
                use: 'babel-loader'
            },
        ]
    }
};

---

现在运行网页包。它一定很好用。

上面的教程完全过时了吗？@ducin babel大大改进了！它写于2015年。所以，很明显，它是旧的。我得到了同样的错误，我想知道你是否曾经解决过这个问题。我不遵循相同的教程。