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語法錯誤

回答

相關問題