Reactjs 网页包不'；我不理解React'；s语法

我正在学习React和Webpack。现在我已经编写了一个显示名称的组件；-）

我使用Webpack处理我的JS：

module.exports = {
    entry: [
        './_babel/index.js'
    ],
    output: {
        path: __dirname + '/_js',
        filename: 'index.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
    }
};

不幸的是，当我运行

webpack

时，我会

ERROR in ./_babel/components/posts/index.js
Module build failed: SyntaxError: /Users/tomek/Sites/wordpress/wp-content/themes/Devoid/_babel/components/posts/index.js: Unexpected token (17:6)
  render() {
    return (
      <div>
        <h2>Hello, {this.name}</h2>
        <button onClick={this.callByName}>Alert</button>
      </div>

./\u babel/components/posts/index.js中的

错误
模块构建失败：语法错误：/Users/tomek/Sites/wordpress/wp content/themes/Devoid/_babel/components/posts/index.js:意外标记（17:6）
render（）{
返回(
你好，{this.name}
警觉的

---

很可能我忘了什么，但我似乎找不到什么。

您需要将react加载程序添加到您的webpack.config.js。我还建议添加ES2015加载程序。尝试以下操作：

module.exports = {
    entry: [
        './_babel/index.js'
    ],
    output: {
        path: __dirname + '/_js',
        filename: 'index.js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {presets: ['es2015']}
        },
        {
          test: /\.jsx$/,
          loader:'babel-loader',
          query: {presets: ['es2015', 'react']}
        }
      ]
    }
};

---

您需要将react加载程序添加到webpack.config.js。我还建议添加ES2015加载程序。请尝试以下操作：

module.exports = {
    entry: [
        './_babel/index.js'
    ],
    output: {
        path: __dirname + '/_js',
        filename: 'index.js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {presets: ['es2015']}
        },
        {
          test: /\.jsx$/,
          loader:'babel-loader',
          query: {presets: ['es2015', 'react']}
        }
      ]
    }
};

---

哪个版本的babel..5或6？哪个版本的babel..5或6？你完全正确！我忘了指定babel预设；-）谢谢！我使用了

.babelrc

文件。你完全正确！我忘了指定babel预设；-）谢谢！我使用了

.babelrc

文件。

module.exports = {
    entry: [
        './_babel/index.js'
    ],
    output: {
        path: __dirname + '/_js',
        filename: 'index.js'
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {presets: ['es2015']}
        },
        {
          test: /\.jsx$/,
          loader:'babel-loader',
          query: {presets: ['es2015', 'react']}
        }
      ]
    }
};