React 服务器运行错误 + Redux + Webpack + Babel [TODO LIST]

Question

我是 React 的新手，正在做一个待办事项列表，但我无法启动我的服务器，因为我在尝试yarn run build时遇到错误

错误

ERROR in ./src/index.js
Module parse failed: C:UsersPixyDigitalDesktopGettosrcindex.js Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
|
| render(
|     <Provider store={store}>
|         <App />
|     </Provider>,
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.js
webpack: Failed to compile.

索引.js

import React from "react"
import {render} from "react-dom"
import {Provider} from "react-redux"
import store from "./stores/store"
import App from "./components/app.js"
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("app")
)

webpack.config.js

module.exports = {
entry: __dirname + "/src/index.js",
output:{
filename: "bundle.js",
path: __dirname + "/dist"
},
module:{
loaders:[
{
test:/.css$/,
loader:"style-loader$css-loader"
},
{
test:/.jsx$/,
loader:"babel-loader",
exclude:/node_modules/
}
]
},
resolve:{
extensions:['*','.js','.jsx','.css']
},
devServer:{
contentBase: __dirname + "/dist"
}
}

包.json

{
"name": "todoApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"license": "MIT",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack-dev-server --inline --hot"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"style-loader": "^0.18.2",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-hot-loader": "^1.3.1",
"react-redux": "^5.0.5",
"redux": "^3.7.1"
}
}

那么我该如何解决我的问题，您有什么想法吗？

谢谢。

Answer 1

{
test:/.jsx?$/,
loader:"babel-loader",
exclude:/node_modules/,
options: {
presets: ["react"]
}
}

UPD：发生这种情况是因为 babel 不会将 JSX 转换为开箱即用;

另外，我建议使用.baberlc文件配置 babel