javascript 模块构建失败 - Webpack、React、Babel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33621866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Module Build Failed - Webpack, React, Babel
提问by Erkan Demir
I was following a video tutorial from plural sight. Course name is "Building a Real-time App with React, Flux, Webpack, and Firebase".
我正在从复数角度学习视频教程。课程名称是“使用 React、Flux、Webpack 和 Firebase 构建实时应用程序”。
Please see below code and attached screen shot of the issue i am having. Webpack is failing when ever i try to re build the files. Can someone please advise of what that issue could be. I'm currently using all the latest libraries.
请参阅下面的代码和我遇到的问题的附加屏幕截图。每当我尝试重新构建文件时，Webpack 都会失败。有人可以建议这个问题可能是什么。我目前正在使用所有最新的库。
/*webpack.config.js*/
module.exports = {
entry: {
main: [
'./src/main.js'
]
},
output: {
filename: './public/[name].js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
}
/*App.jsx*/
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
messages: [
'hi there how are you ?',
'i am fine, how are you ?'
]
}
}
render() {
var messageNodes = this.state.messages.map((message)=> {
return (
<div>{message}</div>
);
});
return (
<div>{messageNodes}</div>
);
}
}
export default App;
/*main.js*/
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(<App/>, getElementById('container'));
/*index.html*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="container"></div>
<script src="public/main.js"></script>
</body>
</html>
/*package.json */
{
"name": "reatapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.0.1",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"webpack": "^1.12.3"
}
}
回答by leocreatini
It was solved. The answer was in installing presets npm i --save babel-preset-env babel-preset-react. Then adding another key in the webpack.config.js, in the loader: query: {presets: ['env', 'react'] }. Should be good to go.
解决了。答案是安装预设npm i --save babel-preset-env babel-preset-react。然后在webpack.config.js 中添加另一个键，在 loader: 中query: {presets: ['env', 'react'] }。去应该不错。
回答by utkarsh bajpai
I tried the above steps and followed many blogs and sites for this, but the problem was still there.Then I found out that I was working with webpack 4. So,
after long search I found out the blog:
https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75.
So, I followed the steps and found out that the problem was still there.Then, after long search, I found out that react folder was not present in my node_modules folder.Then I followed the following steps:
我尝试了上述步骤并为此关注了许多博客和网站，但问题仍然存在。然后我发现我正在使用 webpack 4。所以，经过长时间的搜索，我找到了博客：
https://medium。 freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75。
所以，我按照步骤操作，发现问题依旧。 然后，经过长时间的搜索，我发现我的node_modules文件夹中没有react文件夹。 然后我按照以下步骤操作：
- Delete the package.lock.json file.
- Run npm install.
- Check the node_modules folder, you will now see the react folder.
- Run npm start. Then, my problem got rectified.
- 删除 package.lock.json 文件。
- 运行 npm 安装。
- 检查 node_modules 文件夹，您现在将看到 react 文件夹。
- 运行 npm start。然后，我的问题得到了纠正。
