webpack：与babel-loader语法错误

我开始学习反应与教程。但webpack未按预期工作。webpack：与babel-loader语法错误

所以这里是我的简单webpack.conf.js文件。

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

此外，我安装了所有的模块：

npm install -g webpack 
npm install webpack react babel-loader babel-core

但运行webpack的时候，我得到了以下错误消息：

ERROR in ./app-client.js 
Module build failed: SyntaxError: app-client.js: Unexpected token (4:13) 
    2 | var APP = require('./components/APP'); 
    3 | 
> 4 | React.render(<APP />, document.getElementById('react-container')); 
    |   ^

在我的理解，babel-loader应该照顾那个。但它看起来并不努力。

我错过了什么？

来源

2016-03-03 lang2

您是否正在配置babel与[反应预设]（https://babeljs.io/docs/plugins/preset-react/）？ – elclanrs

不是。教程没有提到这一点。 – lang2

我会尝试另一个教程，也许这一个https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html – elclanrs

巴别6本身并没有做任何事情。为了正确处理JSX，你需要在你的.babelrc文件中的以下内容：

{ 
    "presets": ["react"] 
}

另外，你需要确保你使用NPM安装预设：

$ npm install --save-dev babel-core react react-dom babel-preset-react

的好地方开始是官方React getting started page

来源

2016-03-03 03:13:58 rossipedia

你也可以在'webpack.conf.js'文件中使用'loader：'babel？presets [] = react'或[查询参数选项]（https://github.com/）来添加不带'.babelrc'文件的预置参数装载机的babel/babel-loader＃选项）。 –

webpack：与babel-loader语法错误

回答

相关问题