Reactjs 为什么不是';babel在解析我的JSX吗?
运行Reactjs 为什么不是';babel在解析我的JSX吗?,reactjs,webpack,babeljs,Reactjs,Webpack,Babeljs,运行webpack时出现以下错误: Error in ./src/index.jsx Module parse failed: .../src/index.jsx Unexpected token (10:18) You may need an appropriate loader to handle this file type. 我相信我已经安装了所有正确的装载机,如果我遗漏了什么,请告诉我 package.json: "dependencies": { "isomorphic-fet
webpack
时出现以下错误:
Error in ./src/index.jsx
Module parse failed: .../src/index.jsx Unexpected token (10:18)
You may need an appropriate loader to handle this file type.
我相信我已经安装了所有正确的装载机,如果我遗漏了什么,请告诉我
package.json:
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"koa": "^1.2.4",
"koa-ejs": "^3.0.0",
"koa-route": "^2.4.2",
"koa-router": "^5.4.0",
"koa-static": "^2.0.0",
"koa-webpack-dev-middleware": "^1.2.2",
"node-sass": "^3.10.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.2"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.6",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.25.0",
"eslint": "^3.7.1",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^6.4.1",
"koa-webpack-hot-middleware": "^1.0.3",
"react-hot-loader": "^1.3.0",
"redux-devtools": "^3.3.1",
"webpack-dev-server": "^1.16.2"
}
webpack.config.js:
const webpack=require('webpack');
const path=require('path');
const ROOT_PATH=PATH.resolve(_dirname);
module.exports={
devtool:process.env.NODE_env==='production'?'''sourcemap',
条目:[
“webpack热中间件/客户端?路径=/\uuuuuWebpack\uHMR&timeout=20000”,
解析(根路径,'src/index.jsx')
],
模块:{
预紧器:[{
测试:/\.jsx?$/,,
加载程序:process.env.NODE_env==='production'?[]:['eslint'],
包括:path.resolve(根路径'src/index.jsx')
}],
装载机:[{
测试:/\.jsx?$/,,
排除:/node_模块/,
加载器:“巴贝尔”,
查询:{
预设:['es2015'、'stage-0'、'react'],
cacheDirectory:true,
环境:{
发展:{
预设:['react-hmre']
}
}
},
包括:“./src”
},
{
测试:/\.scss$/,,
加载器:['style','css','sass']
}]
},
决心:{
扩展名:['','.js','.jsx']
},
输出:{
路径:process.env.NODE_env==='production'
?路径解析(根路径,“dist”)
:path.resolve(根路径,'build'),
公共路径:“/”,
文件名:“bundle.js”
},
开发服务器:{
contentBase:path.resolve(根路径,'build'),
历史上的倒退:是的,
热:是的,
是的,
进展:正确
},
插件:[
新建webpack.optimize.OccurenceOrderPlugin(),
新建webpack.HotModuleReplacementPlugin(),
新的webpack.NoErrorsPlugin()
]
};
src/index.jsx:
运行
babel src/index.jsx确实可以按预期工作,因此我认为这是网页包配置的问题。我的include
js(x)加载程序的路径是错误的。固定使用
include: path.resolve(ROOT_PATH, './src')
而不是
include: './src'
根据babel loader配置中预设的顺序,我看到了一些奇怪的问题。您可以尝试“预设”:[“es2015”、“反应”、“阶段0”]?仍然是一个问题。FWIW我也尝试过使用.babelrc文件,但没有预设,这也不起作用。不过,运行babelsrc/index.jsx确实有效。
include: path.resolve(ROOT_PATH, './src')
include: './src'