8
私は複数の視点からビデオチュートリアルに従っていました。コース名は、「React、Flux、Webpack、およびFirebaseを使用したリアルタイムアプリケーションの構築」です。モジュールビルド失敗 - Webpack、React、Babel
私が持っている問題のコードと添付のスクリーンショットをご覧ください。私がこれまでにファイルを再構築しようとすると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"
}
}
'output：{filename：./public/ [name] .js}'のようなものかもしれません。パスに別のキーを追加してみてください： 'path： '。/ public''。しかし、私はあなたのメインが 'main.js'であり、' app.jsx'にあなたのコードがあることも知っています。あなたは './components/app.jsx'からアプリケーションをインポートしましたか？ ' – leocreatini
@LeoCreatiniあなたはそれが問題だと思います。この問題は、Reactコードを追加した後に始まりました。私のファイルディレクトリの添付スクリーンショットを見てください。 –
'render（）'の 'return（）;'でセミコロンが見つからず、 'this.state = {}'のセミコロンがありません。 – leocreatini