2015-11-10 19 views
8

मैं बहुवचन दृष्टि से एक वीडियो ट्यूटोरियल का पालन कर रहा था। कोर्स का नाम "रिएक्ट, फ्लक्स, वेबपैक और फायरबेस के साथ रीयल-टाइम ऐप बनाना" है।मॉड्यूल बिल्ड असफल - वेबपैक, प्रतिक्रिया, बेबेल

कृपया नीचे दिए गए मुद्दे के कोड और संलग्न स्क्रीन शॉट देखें। जब भी मैं फ़ाइलों को फिर से बनाने की कोशिश करता हूं तो वेबपैक विफल हो रहा है। क्या कोई सलाह दे सकता है कि वह मुद्दा क्या हो सकता है। मैं वर्तमान में सभी नवीनतम पुस्तकालयों का उपयोग कर रहा हूं।

enter image description here enter image description here

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

यह 'आउटपुट: {filename: ./public/ [name] .js} 'के साथ हो सकता है। पथ के लिए एक और कुंजी जोड़ने का प्रयास करें: 'पथ:'।/Public''। लेकिन मैं यह भी देखता हूं कि आपका मुख्य 'main.js' है, इस बीच आपका कोड 'app.jsx' में है। क्या आपने '.comcoments/app.jsx' से 'ऐप आयात किया'; '? – leocreatini

+0

@LeoCreatini आपको क्या लगता है कि यह मुद्दा है। प्रतिक्रिया कोड जोड़ने के बाद समस्या शुरू हुई। कृपया मेरी फ़ाइल निर्देशिका –

+0

के संलग्न स्क्रीन शॉट को देखें, मैंने 'रेंडर() '' रिटर्न() में एक लापता सेमीकॉलन भी देखा है; और 'this.state = {}' – leocreatini

उत्तर

9

यह हल किया गया था। जवाब प्रीसेट npm i --save babel-preset-es2015 babel-preset-react स्थापित करने में था। फिर वेबपैक.config.js में लोडर में query: {presets: ['es2015', 'react'] } में एक और कुंजी जोड़ना। जाने के लिए अच्छा होना चाहिए।

+1

Thx आदमी में बहुत कम कार्य है। उदाहरण और ट्यूटोरियल वास्तव में पुराना हो गया है। – Andrew

+0

मेरे लिए भी काम किया। – fuLLMetaLMan

संबंधित मुद्दे