導入語句在響應時失敗

Question

我正在學習React，並且我有一個像這樣設置的php項目：

在index.php的頭部，我加載：

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

在底部：

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

我沒有做任何翻譯。 一切在Apache + Firefox上運行良好。

然后，我想添加一些過渡效果，例如單擊按鈕而不只是切換時圖像淡入和淡出。 所以我：

1-從這里下載反應過渡： https : //github.com/reactjs/react-transition-group

2-將其src文件夾的內容添加到js，現在看起來像這樣：

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-這樣加載index.js：

現在，在Chrome上，運行網站時出現此錯誤：

index.js:1 Uncaught SyntaxError: Unexpected token import

在Firefox上：

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

我想念什么嗎？

謝謝

Answer 1

要使用導入，您不應使用babel polyfill，而應將代碼與babel一起轉換。 因此，強烈建議您在帶有babel插件的react項目中使用webpack。

該博客可能會幫助您進一步設置react / webpack / babel項目： https ：//scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel

Answer 2

正如安迪·雷（Andy Ray）在這里所說的http://blog.andrewray.me/webpack-when-to-use-and-why一樣，我好像是在做舊事。 輪子已經被徹底改造，我使用的php-webpacker-of-sorts似乎開始落后了。

不幸的是，我似乎很幸運使用了一組導入時沒有沖突的庫，就像<script src=library.js> ，而且react-transition消除了這種錯覺。 遵循dejakob的建議，我將轉碼集成到了該過程中，至少就目前而言，事情似乎再次無縫地進行了。

謝謝