ReactJS - HTTPファイルを提供せずにバベルコードを実行できません

私はreactjsに新しく、babelをインストールして、babel codeをHTTPファイルを提供せずにインストールしようとしています。それは私がReactJS - HTTPファイルを提供せずにバベルコードを実行できません

次のコードで同じルートディレクトリに

{ "presets": ["react"] }

をファイル.babelrcを作成してHTTP babel-coreソースファイルを削除した後

$ npm install --save react react-dom babelify babel-preset-react 
$ browserify -t [ babelify ] main.js -o bundle.js

：Package Managerに従うことで、私はとbrowserifyでそれをインストールしています：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>React Tutorial</title> 
    <script src="build/react.js"></script> 
    <script src="build/react-dom.js"></script> 
    <!-- removed https://npmcdn.com/[email protected]/browser.min.js --> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script type="text/babel"> 
     ReactDOM.render(
     <h1>Hello, world!</h1>, 
     document.getElementById('content') 
    ); 
    </script> 
    </body> 
</html>

ですが、からアクセスするとこれは動作しません。

出典

2016-08-11 Syed Aqeel

エラーコードまたはエラーメッセージが含まれていないため、これは推測です。

browserifyを実行すると、指定したコードがES2015から普通のJavascriptに変換（変換）されるという問題があります。だから、あなたが行う場合は、この：あなたはmain.jsでコードを変換しbundle.jsにそれを書いている

browserify -t [ babelify ] main.js -o bundle.js

。

だからあなたのコードには二つの問題があります。

あなたのHTMLファイル内bundle.jsを含めることはありませんが。蒸散したコードをロードするには、<script src="build/bundle.js"></script>を追加する必要があります。
お客様のHTML <script>ブロックのコードにはbrowserifyが表示されません。あなたのビルドステップ（browserifyを実行中）は、HTMLファイルではなくスクリプト上で動作しています。したがって、コードは決して透明化されず、ブラウザがそれを実行しようとすると失敗します。バベルは、ページがロードされたときにコードをtranspileます特別な「ライブ」transpilationモードがあり、このモードは<script>でコードを取得しているので、あなたがHTMLでbabel-coreが含まれている場合、それは動作します

理由がありますこれはユーザーのブラウザですべて実行されているためです

出典

2016-08-11 13:48:45 Kryten

HTTPファイルを提供せずに 'babel code'を実行するには' bundle.js'ファイルをインクルードし、 'main.js'に' babel script'を置く必要がありますか？ –

ReactJS - HTTPファイルを提供せずにバベルコードを実行できません

答えて

関連する問題