2016-04-18 11 views
20

इम निर्माण एक नए एप्लिकेशन प्रतिक्रिया लेकिन निम्नलिखित त्रुटि मिलती है - "की आवश्यकता होती है परिभाषित नहीं है"की आवश्यकता होती है परिभाषित नहीं है

हैलो-world.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React!</title> 
    <script src="react/react.js"></script> 
    <script src="react/react-dom.js"></script> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    <script type="text/babel" src="hello-world.js"> 
    </body> 
</html> 

हैलो-world.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import App from './App.jsx'; 

ReactDOM.render(
     <App />, 
     document.getElementById('example') 
    ); 

App.jsx

import React from 'react'; 

class App extends React.Component { 
    render() { 
     return (
     <div> 
      Hello World!!! 
     </div> 
    ); 
    } 
} 

export default App; 

मैं इसे अपने क्लाइंट से चला रहा हूं और कोई वेब सर्वर नहीं चल रहा है।

मैंने http://requirejs.org/docs/release/2.2.0/minified/require.js शामिल करने का प्रयास किया लेकिन यह एक पूरी तरह से अलग त्रुटि देता है।

उत्तर

38

आप अपने ब्राउज़र के भीतर से एक कॉमनजेएस मॉड्यूल का उपयोग करने की कोशिश कर रहे हैं। यह काम नहीं करेगा।

आप उनका उपयोग कैसे कर रहे हैं? जब आप ES6 बेबेल में import ... from ... लिखते हैं तो इन कॉलों को कॉमनजेएस नामक मॉड्यूल परिभाषा में पारदर्शी कर दिया जाएगा और चूंकि कॉमनजेएस ब्राउज़र में नहीं है, इसलिए आपको require() से एक अपरिभाषित त्रुटि मिल जाएगी।

इसके अलावा, आप RequJS को लोड करने का भी प्रयास कर रहे हैं जो एएमडी, असिंक्रोनस मॉड्यूल परिभाषा नामक एक अलग मॉड्यूल परिभाषा पैटर्न का उपयोग करता है, और आपके लिए require कॉल का ख्याल नहीं रखेगा। आप RequJS विशिष्ट कॉल में wrap them कर सकते हैं।

आप अपने कोड बेस में CommonJS मॉड्यूल का उपयोग करने के लिए आपको सबसे पहले उन्हें या तो Browserify या webpack के साथ बंडल करने की जरूरत चाहते हैं। दो टूल आपके require कॉल को कुछ गोंद जादू में बदल देंगे जो आप ब्राउज़र के भीतर उपयोग कर सकते हैं।

लेकिन आपके विशिष्ट मामले में, यदि आप import कॉल हटाते हैं और बस ब्राउज़र को window ऑब्जेक्ट पर बनाए गए वर्गों का ख्याल रखने और संलग्न करने दें, तो आपके कोड को काम करना चाहिए।

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