Webpack、babel 和 react 无法编译基本设置

Question

我做了很多次，但现在我觉得自己像个笨蛋。

只是行不通。

我不知道我做错了什么。我希望这是非常愚蠢的事情。

webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: __dirname + '/js/',
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx$/,
        exclude: /node_modules/,
        loaders: ['babel'],
        include: path.join(__dirname, 'src')
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ]
};

src/index.jsx:

import React from 'react'
import { render } from 'react-dom'
import ColorObj from 'components/ColorObject'

let rootElement = document.getElementById('color-game');

render(
  <ColorObj backgroundColor="green" textColor="black" />,
  rootElement
);

当运行 webpack:

时出错

Hash: d9f2eead3307d16f76f3
Version: webpack 1.12.8
Time: 350ms
    + 1 hidden modules

ERROR in ./src/index.jsx
Module build failed: SyntaxError:     /Users/matiit/Documents/Private/Projects/color-game/src/index.jsx:         Unexpected token (8:2)
   6 | 
   7 | render(
>  8 |   <ColorObj backgroundColor="green" textColor="black" />,  
     |   ^
   9 |   rootElement
  10 | );
  11 |

我不知道哪里出了问题。我知道这是非常基本的错误，但我将不胜感激任何帮助。

Answer 1

我不知道你的 Babel 设置目前看起来如何，但你需要这些预设来正确解析 React/ES2015 语法。对于 Babel >= 6.0.0:

npm install --save-dev babel-preset-es2015 babel-preset-react

在你的.babelrc中：

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

Webpack、babel 和 react 无法编译基本设置

Webpack, babel and react can't compile basic setup

webpack

babeljs