Reactjs 什么';我的网页配置有什么问题?

Reactjs 什么';我的网页配置有什么问题?,reactjs,webpack,babeljs,babel-polyfill,Reactjs,Webpack,Babeljs,Babel Polyfill,我开始在一个学生项目中使用Webpack,但我一直在配置Webpack以包含React和Babel。以下是我的节点包: +-- babel-core@6.18.0 +-- babel-loader@6.2.5 +-- babel-polyfill@6.16.0 +-- babel-preset-es2015@6.18.0 +-- react@15.3.2 +-- react-dom@15.3.2 `-- webpack@1.13.2 。。。和m'y网页包配置文件: module.exports

我开始在一个学生项目中使用Webpack,但我一直在配置Webpack以包含React和Babel。以下是我的节点包:

+-- babel-core@6.18.0
+-- babel-loader@6.2.5
+-- babel-polyfill@6.16.0
+-- babel-preset-es2015@6.18.0
+-- react@15.3.2
+-- react-dom@15.3.2
`-- webpack@1.13.2
。。。和m'y网页包配置文件:

module.exports = {
    entry: ['babel-polyfill', './src/index.jsx'],
    output: {
        path: './build',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};
但是
webpack
命令显示此错误:

ERROR in ./src/index.jsx
Module build failed: ReferenceError: [BABEL] C:\wamp\www\tripfighter\src\index.jsx: Unknown option: C:\wamp\www\tripfighter\node_modules\react\react.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: ['pluginName', {option: value}] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "C:\\wamp\\www\\tripfighter\\node_modules\\react\\react.js")
    at Logger.error (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:221:20)
    at C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:260:14
    at C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:329:22
    at Array.map (native)
    at OptionManager.resolvePresets (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:270:20)
    at OptionManager.mergePresets (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:259:10)
    at OptionManager.mergeOptions (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:244:14)
    at OptionManager.init (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:12)
    at File.initOptions (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\index.js:216:65)
    at new File (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\file\index.js:139:24)
    at Pipeline.transform (C:\wamp\www\tripfighter\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\wamp\www\tripfighter\node_modules\babel-loader\index.js:38:20)
    at Object.module.exports (C:\wamp\www\tripfighter\node_modules\babel-loader\index.js:131:12)
 @ multi main
(这是我的示例index.jsx文件)

导入“babel polyfill”;
从“React”导入React;
从“react dom”导入react dom;
ReactDOM.render(
你好,世界!,
document.getElementById('root'))
);
从“/cats.js”导入猫;
控制台日志(CAT);
所以问题似乎来自我的webpack.config.js,但我不知道为什么,尽管我在网上搜索了很多例子。 你能帮助我吗?谢谢

您的配置是

presets: ['es2015', 'react']
但您安装的唯一预设是

+-- babel-preset-es2015@6.18.0
所以你的答案是

npm install --save-dev babel-preset-react
编辑:
仅供参考,Babel 7(发布时)给出了一个更清晰的错误信息,因此这将使这些情况更容易处理。

您可以通过运行下面的命令来删除此错误:

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

啊,作为一个noob,我还认为“npm安装react”足以满足预设的“react”,但实际上你需要安装“babel preset react”。也要继续前进,而不是保持年度预设,如
es2015
es2016
。。。。最好使用@Hozefa True,但是这里的问题特别有
es2015
,问题的预设是
react
,因此基于年份的预设对这里描述的问题没有影响。@loganfsmyth同意!我只是想把这件事说出来,让其他调查此事的人能从中获益。
npm install --save-dev babel-preset-react