Babel transpile unvollständig?

Question

Meine Seite wird mit dem folgenden Javascript-Rendering:

<script src="/static/js/index.js" type="text/javascript"> 
'use strict'; 
//modules/index.js 
var React = require('react'); 
var ReactDOM = require('react-dom'); 
ReactDOM.render(
React.createElement(
'div', 
null, 
'hello world!' 
), document.getElementById('content')); 
//# sourceMappingURL=index.js.map 
</script> 

Welche meinem Browser keinen Sinn nicht machen kann, weil sie nicht weiß, was React ... ist, weil es keine überall ist enthält. Selbst nachdem ich reagieren js Dateien enthalten (beispielsweise von CDN) Konsole meinem Browser js berichtet

'ReferenceError:require is not defined'. 

Nach Tonnen babel Installation und darauf reagieren bezogenen Module, warum die Transpiler noch Ausgabe erzeugen, die keinen Sinn für den Browser macht? Meine .babelrc Presets sind ["es2015", "react"]. In meiner package.json Datei ist:

"scripts": { 
    "compile": "babel -w modules/ -d public/js --source-maps && exit code 0", 
    "start": "node app.js" 
    }, 

Was vermisse ich?

Answer 1

Mit Dingen wie NodeJS sind sie serverseitig, nicht clientseitig. Das bedeutet, dass sie nicht im Browser ausgeführt werden sollen. Wenn Sie Ihre App lokal ausführen, verwendet sie Node lokal, also ist alles in Ordnung, aber im Browser ist die Umgebung anders. Um Knoten in Browsern zu verwenden, siehe Webpack oder einen ähnlichen Modullader.