ReactJS - サーバから2回要求されたファイル

私はReactJSを使い始めています。私は "Gettind Started"の単純な例に従っています。ReactJS - サーバから2回要求されたファイル

これは私のHTMLファイルです：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Hello React!</title> 
    <script src="js/reactjs/react.min.js"></script> 
    <script src="js/reactjs/react-dom.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
    <script type="text/babel" src="js/main.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    </body> 
</html>

それは動作します。しかし、Fiddlerでネットワークトラフィックを監視すると、main.jsがサーバーから2回引き出されていることがわかります。それは目的ですか？バグ？

出典

2016-04-26 developer82

とすぐにブラウザが遭遇すると、次の行

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
<script type="text/babel" src="js/main.js"></script>

ブラウザの問題HTTP両方のファイルに対する要求。しかし、js/main.jsはブラウザ用の 'text/babel'型であるため、解析/実行するためにJavaScriptエンジンに渡されることはありません。そういうわけで、 'main.js'はES6コードを持っている可能性があるので、ブラウザはそれを今のところ理解できません。 babelのbrowser.min.jsがロードされて実行されると、 'text/babel'タイプのDOMでscriptタグを検索し、XHRリクエストを発行してそのファイルをロードします。その後、browser.min.jsは 'main.js'のコードをコンパイルしてES5に変換して実行します。これが動作する方法です。

ブラウザは以前のリクエストからキャッシュに 'js/main.js'を既に持っているので、 'js/main.js'のためにbabelのbrowser.min.jsによって発行されたXHRリクエストはキャッシュ自体から提供されます。追加の外部http要求はありません。

出典

2016-04-26 08:37:48

それは後で生産するために何かしますか？あるいは、生産の前に行うべきステップはありますか？ – developer82

これは、クライアント/ブラウザ側でES6コードのコンパイルと変換を行いたいときにどのように動作するかを示しています。プロダクションでは、webpackを使う方が良いです。 Webpackはbabelモジュールをとり、 'React/ES2015'プリセットに対してコードを実行し、アプリケーションのエントリーポイントとして機能するjsファイルを生成します。 –

ReactJS - サーバから2回要求されたファイル

答えて

関連する問題