Import-Anweisungen nicht auf reagieren

Question

Ich lerne Reaktion, und ich habe ein PHP-Projekt wie dies ein:

Im Kopf von index.php Ich lade:

<script type="text/javascript" src="js/libs/react.js"></script> 
<script type="text/javascript" src="js/libs/react-dom.js"></script> 
<script type="text/javascript" src="js/libs/browser.min.js"></script> 

und am Boden :

<script type="text/babel" src="jsx/index.jsx"></script> 
<script> 
     window.onload=function(){ 
     site.init(); 
     }</script> 
</script> 

Ich mache keine transpiling. Alles läuft gut auf Apache + Firefox.

Dann wollte ich einige Übergänge hinzufügen, wie Bilder ein- und ausblenden beim Klicken auf eine Schaltfläche, anstatt nur zu wechseln. So I:

1- heruntergeladen reagieren Übergang von hier: https://github.com/reactjs/react-transition-group

2-, den Inhalt seiner src Ordner js hinzugefügt, die nun wie folgt aussieht:

js/ 
../<some vanilla.js files> 
../libs/ 
../libs/react.js 
../libs/react-dom.js 
../libs/browser.min.js 
../libs/react-transition-group/ 
......./react-transition-group/index.js 
......./react-transition-group/CSSTransitionGroup.js 
......./react-transition-group/CSSTransitionGroup.js 
......./react-transition-group/TransitionGroup.js 

3- geladen Index. js wie folgt aus:

nun auf Chrome, erhalte ich diese Störung, wenn ich die Seite ausführen:

index.js:1 Uncaught SyntaxError: Unexpected token import 

Auf Firefox:

SyntaxError: import declarations may only appear at top level of a module index.js:1 

Irgendeine Idee über was vermisse ich?

Dank

Answer 1

Import zu verwenden, sollten Sie nicht die babel polyfill, verwenden aber den Code mit babel transpile. Daher ist es sehr empfehlenswert, das Webpack in Ihrem Reaktionsprojekt mit einem Babel-Plugin zu verwenden.

ein Projekt reagieren/webpack/babel Dieser Blog können Sie weiter mit der Einrichtung helfen: https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel

Answer 2

Als Andy Ray hier http://blog.andrewray.me/webpack-when-to-use-and-why gesagt, es sieht aus wie ich die Dinge auf die alte Weise zu tun; das rad wurde neu erfunden und der php-webpacker-of-sort, den ich benutze, scheint langsam hinterherzuhinken.

Es scheint, dass ich unglücklicherweise hatte Glück, eine Reihe von Bibliotheken zu verwenden, die keinen Konflikt bei der importierten nur als <script src=library.js>, und reagieren-Übergang zerstreute diese Illusion. Nach dem Dejakob-Rat habe ich das Transpiling in den Prozess integriert und zumindest für den Moment scheinen die Dinge wieder nahtlos zu funktionieren.

Dank