webpack、babel和React发生了什么变化

Question

我再也不能进行简化的webpack构建了，我不明白为什么。。。

app.js

var React = require("react");
class App extends React.Component {
    render() {
        return <div>Hello World</div>;
    }
}
React.render(<App />, document.body);

webpack.config.js

module.exports = {
    entry: "./app.js",
    output: {
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                exclude: /(node_modules)/,
                loader: 'babel'
            }
        ]
    }
};

运行

$ webpack

导致错误

ERROR in ./app.js
Module build failed: SyntaxError: /Users/alexbanks/Documents/code-play-2/eslint/app.js: Unexpected token (6:15)
  4 | 
  5 |     render() {
> 6 |         return <div>Hello World</div>;
    |                ^
  7 |     }
  8 | 
  9 | }
    at Parser.pp.raise (/Users/alexbanks/Documents/code-play-2/eslint/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/alexbanks/Documents/code-play-2/eslint/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/Users/alexbanks/Documents/code-play-2/eslint/node_modules/babylon/lib/parser/expression.js:510:12)
    at Parser.pp.parseExprSubscripts (/Users/alexbanks/Documents/code-play-2/eslint/node_modules/babylon/lib/parser/expression.js:265:19)

这是过去建造的东西。我尝试过使用react-dom，我安装了babel-loader、babel-core和react。我已经尝试了几种代码变体，包括React.createComponent……所有的东西都给了我相同的错误。我的项目只有3个文件，app.js、webpack.config.js和index.html.

Answer 1

如果您进行了npm更新，它可能是babel 6。以下是更改。

  "devDependencies": {
    "babel-core": "latest",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "latest",
    "babel-preset-react": "latest",
    "babel-preset-stage-0": "latest",

    loaders: [
      {
        test: /.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {presets:[ 'es2015', 'react', 'stage-0' ]}
      },