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' ]}
      },

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

What changed about webpack, babel, and React

reactjs

webpack

babeljs

app.js

webpack.config.js

运行...

导致错误...

???