2016-04-18 12 views
20

Im Gebäude eine neue App reagieren, aber die folgende Fehlermeldung erhalten - benötigen, ist nicht definiert

hallo-world.html "benötigen, ist nicht definiert"

<!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> 

hallo-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; 

Ich führe das von meinem Klienten aus und habe keinen laufenden Webserver.

Ich habe versucht, http://requirejs.org/docs/release/2.2.0/minified/require.js einzuschließen, aber es gibt einen völlig anderen Fehler.

Antwort

38

Sie versuchen, ein CommonJS-Modul in Ihrem Browser zu verwenden. Dies wird nicht arbeiten.

Wie verwenden Sie sie? Wenn Sie in ES6 import ... from ... schreiben, wird Babel diese Aufrufe in eine Moduldefinition namens CommonJS umwandeln, und da CommonJS nicht im Browser vorhanden ist, erhalten Sie einen undefinierten Fehler von require().

Außerdem versuchen Sie auch, RequireJS zu laden, die ein anderes Moduldefinitionsmuster mit der Bezeichnung AMD, Asynchronous Module Definition verwendet, und kümmert sich nicht um die require-Aufrufe für Sie. Sie können wrap them in RequireJS spezifische Anrufe. Wenn Sie CommonJS-Module in Ihrer Codebasis verwenden möchten, müssen Sie diese zunächst mit Browserify oder webpack bündeln. Die zwei Werkzeuge werden Ihre Anrufe zu etwas Kleber Magie umwandeln, die Sie innerhalb des Browsers verwenden können.

Aber in Ihrem speziellen Fall, wenn Sie die import Aufrufe entfernen und lassen Sie einfach den Browser kümmern und fügen Sie die Klassen, die Sie erstellt haben, an die window Objekt Ihr Code sollte funktionieren.