Wie babel direkt von einem Skript-Tag zu verwenden, ohne babel selbst zu installieren

Question

Ich schreibe reagieren mit all diesen Bibliotheken eingeführt von cdnjs.com. Allerdings finde ich es Reporting-Fehler: "Uncaught TypeError: Kann nicht lesen" Schlüssel "undefined" auch wenn ich nicht eine einzige Zeile von Javascript-Code schreiben.

Wie konnte es passieren?

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script> 
<script text="text/babel"> 
//some code here 

</script> 

Answer 1

Einschließlich Babel im Browser ist nicht wirklich die Art, wie es funktionieren soll.

Babel ist ein Build-Tool - es sollte nur ein Teil Ihres Build-Prozesses sein. In den meisten Fällen verwenden Sie einen Bundler wie Webpack oder browserify, mit dem Sie Ihren Code von ES6 nach ES5 (oder einer anderen Zielversion) übertragen können.

Here Sie können alle verschiedenen Möglichkeiten sehen, wie Sie Babel in Ihren Build-Prozess einbeziehen können.

Auf diese Weise wird die gesamte Verarbeitung auf Ihrem Computer/Server ausgeführt und Sie müssen babel nicht in den Client einbeziehen, da dieser nur den transpilierten Code erhält, den er verstehen kann.

Es ist jedoch möglich, Ihren Code direkt im Browser mit babel-standalone zu transformieren. Sie können sehen, dass es funktioniert here.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script> 
<script text="text/babel"> 
var input = 'const getMessage =() => "Hello World";'; 
var output = Babel.transform(input, { presets: ['es2015'] }).code; 
console.log(output); 
</script> 

Sie sollten jedoch fast nie diesen Ansatz verwenden müssen.