Javascript 模块构建失败-网页包、React、Babel_Javascript_Reactjs_Webpack_Babeljs_Ecmascript 2016

Javascript 模块构建失败-网页包、React、Babel

javascript reactjs webpack

Javascript 模块构建失败-网页包、React、Babel,javascript,reactjs,webpack,babeljs,ecmascript-2016,Javascript,Reactjs,Webpack,Babeljs,Ecmascript 2016,我在看《复数视野》的视频教程。课程名称为“使用React、Flux、Webpack和Firebase构建实时应用程序” 请参阅下面的代码和附加的屏幕截图的问题，我有。当我尝试重新构建文件时，Webpack失败。有人能告诉我这个问题是什么吗。我目前正在使用所有最新的库 /*webpack.config.js*/ module.exports={ 条目：{ 主要内容：[ “./src/main.js” ] }, 输出：{ 文件名：'./public/[name].js' }, 模块：{ 装载机：

我在看《复数视野》的视频教程。课程名称为“使用React、Flux、Webpack和Firebase构建实时应用程序”

请参阅下面的代码和附加的屏幕截图的问题，我有。当我尝试重新构建文件时，Webpack失败。有人能告诉我这个问题是什么吗。我目前正在使用所有最新的库

/*webpack.config.js*/
module.exports={
条目：{
主要内容：[
“./src/main.js”
]
},
输出：{
文件名：'./public/[name].js'
},
模块：{
装载机：[
{
测试：/\.jsx？$/,，
排除：/node_模块/，
加载器：“巴贝尔”
}
]
}
}
/*App.jsx*/
从“React”导入React；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
信息：[
“你好，你好吗？”，
“我很好，你好吗？”
]
}
}
render（）{
var messageNodes=this.state.messages.map（（message）=>{
返回(
{message}
);
});
返回(
{messageNodes}
);
}
}
导出默认应用程序；
/*main.js*/
从“React”导入React；
从“react dom”导入react dom；
从“./components/App.jsx”导入应用程序；
render（，getElementById（'container'）；
/*index.html*/
/*package.json*/
{
“名称”：“reatapp”，
“版本”：“1.0.0”，
“说明”：“，
“main”：“index.js”，
“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”
},
“作者”：“作者”，
“许可证”：“ISC”，
“依赖项”：{
“巴别塔核心”：“^6.1.2”，
“巴别塔加载器”：“^6.0.1”，
“巴别塔预设反应”：“^6.1.2”，
“babelify”：“^7.2.0”，
“反应”：“^0.14.2”，
“react dom”：“^0.14.2”，
“网页包”：“^1.12.3”
}
}

问题解决了。答案是安装预设

npm i--save babel preset env babel preset react

。然后在加载程序中的webpack.config.js中添加另一个键：

查询：{presets:['env'，'react']}

。应该可以走了。

我尝试了上述步骤，并为此关注了许多博客和网站，但问题仍然存在。然后我发现我正在使用webpack 4。所以经过长时间的搜索，我找到了博客：
.
因此，我按照步骤进行操作，发现问题仍然存在。然后，经过长时间搜索，我发现react文件夹不存在于我的node_modules文件夹中。然后我按照以下步骤进行操作：

删除package.lock.json文件

运行npm安装

检查node_modules文件夹，您现在将看到react文件夹

运行npm启动。然后，我的问题得到了纠正

您可以尝试执行以下命令：

npm rebuild node sass

它可能具有

输出：{filename:./public/[name].js}

。尝试为路径：

path:'./public'

添加另一个键。但是我也看到你的main是

main.js

，同时你的代码在

app.jsx

中。您是否从“./components/App.jsx”导入应用程序？@LeoCreatini是什么让你认为这就是问题所在。问题是在我添加React代码后开始的。请参阅附件中我的文件目录屏幕截图。我还看到

render（）

的

return（）中缺少分号

和

this.state={}

中缺少的分号是的，我没有看到滚动条，

main.js

被隐藏在视图中。只是在返回类型上添加了分号。还是一样的问题。

/*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"
 }
 }