Reactjs 网页包+;巴别塔误差
我正在尝试配置webpack,并已将所有内容都设置好并运行,但现在遇到了相同的错误。我仔细阅读了其他几篇文章,这些文章似乎通过纠正拼写/语法错误得到了解决,但我似乎无法指出代码中的任何错误。还有更严重的事情发生吗Reactjs 网页包+;巴别塔误差,reactjs,webpack,babeljs,Reactjs,Webpack,Babeljs,我正在尝试配置webpack,并已将所有内容都设置好并运行,但现在遇到了相同的错误。我仔细阅读了其他几篇文章,这些文章似乎通过纠正拼写/语法错误得到了解决,但我似乎无法指出代码中的任何错误。还有更严重的事情发生吗 ERROR in ./src/components/App/App.js Module parse failed: /Users/Desktop/fred/src/components/App/App.js Unexpected token (7:11) You may need an
ERROR in ./src/components/App/App.js
Module parse failed: /Users/Desktop/fred/src/components/App/App.js Unexpected token (7:11)
You may need an appropriate loader to handle this file type.
|
| render() {
| return (
| <h1>Hello</h1>;
| );
| };
|
@ ./src/index.js 3:0-39
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index
我的App.js:
import React, { Component } from 'react';
import s from './App.scss';
class App extends Component {
render() {
return (
<h1>Hello</h1>;
);
};
}
export default App;
我的.法律改革委员会:
{
"presets" : ["es2015", "react", "stage-0"]
}
和my package.json:
{
"name": "fred test",
"version": "1.0.0",
"description": "a fred test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"author": "fred",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"postcss": "^5.2.17",
"postcss-loader": "^1.3.3",
"precss": "^1.4.0",
"react-hot-loader": "^1.3.1",
"style-loader": "^0.16.1",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"normalize.css": "^6.0.0",
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
}
您正在使用ES6版本的Javascript。您需要在网页包中预设配置才能理解并传输该信息 您可以尝试将以下内容添加到您的网页模块配置中吗
loaders : [
{
test:/\.jsx?$/,
exclude:/node_modules/,
loader: 'babel-loader',
query:{
presets: ['es2015','react','stage-0']
}
},
// ...
]
您正在使用ES6版本的Javascript。您需要在网页包中预设配置才能理解并传输该信息 您可以尝试将以下内容添加到您的网页模块配置中吗
loaders : [
{
test:/\.jsx?$/,
exclude:/node_modules/,
loader: 'babel-loader',
query:{
presets: ['es2015','react','stage-0']
}
},
// ...
]
问题是您同时定义了
module.rules
和module.loaders
。只要存在module.rules
,网页包就会完全忽略module.loaders
(仅出于兼容性原因而存在)。在您的例子中,所有JavaScript规则都在模块.loaders
中,因此它们都没有被使用
要修复它,请将所有内容放入模块.rules
中。对于.js
文件,您还有两条规则,如/\.js?$/
匹配.j
和.js
,因为?
意味着一次或零次出现,类似地/\.jsx?$/
匹配.js
和.jsx
,这是您真正想要的,而且为.j
制定规则是没有意义的
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot-loader', 'babel-loader']
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
问题是您同时定义了
module.rules
和module.loaders
。只要存在module.rules
,网页包就会完全忽略module.loaders
(仅出于兼容性原因而存在)。在您的例子中,所有JavaScript规则都在模块.loaders
中,因此它们都没有被使用
要修复它,请将所有内容放入模块.rules
中。对于.js
文件,您还有两条规则,如/\.js?$/
匹配.j
和.js
,因为?
意味着一次或零次出现,类似地/\.jsx?$/
匹配.js
和.jsx
,这是您真正想要的,而且为.j
制定规则是没有意义的
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot-loader', 'babel-loader']
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
是在哪里定义的?那实际上并没有引用任何东西。已相应地调整了代码,但错误仍然存在。请将h1用a括起来并删除分号。
在哪里定义?这实际上没有引用任何内容。已相应地调整了代码,但错误仍然存在。将h1用a包装并删除分号。谢谢-我尝试了此操作,但似乎不起作用-还有,这些预设是否未反映在.babelrc文件中?谢谢-我尝试了此操作,但似乎不起作用-还有,这些预设是否未反映在.babelrc文件中?太棒了-非常感谢。我没有意识到两者之间存在差异。一切似乎都回到了正轨。太棒了——非常感谢。我没有意识到两者之间存在差异。一切似乎都回到了正轨。