2017-03-14 1 views
0

私はCommonJS +活字体を使用しようと反応するが、私は、最初のコードのロード中に、次のような問題に捕まってしまった:CommonJS + TypeScriptを使用し、バンドルなしでReactできますか?

Index.htmlと

<script type="text/javascript"> 
      function loadScript(url) 
      {  
       var head = document.getElementsByTagName('head')[0]; 
       var script = document.createElement('script'); 
       script.type = 'text/javascript'; 
       script.src = url; 
       head.appendChild(script); 
      } 


      loadScript('./Scripts/react.js'); 

      loadScript('./Scripts/react-dom.js'); 

      loadScript('./Scripts/require.js'); 

      loadScript('./Scripts/index.js'); 

    </script> 

ロードファイル:インデックスを。 TS

 var rootElement; 

     function _onLoad() { 
      rootElement = rootElement || document.getElementById('root'); 
      ReactDOM.render(React.createElement(DataSample, null), rootElement); 
     } 
     function _onUnload() { 
      if (rootElement) { 
       ReactDOM.unmountComponentAtNode(rootElement); 
      } 
     } 
     var isReady = document.readyState === 'interactive' || document.readyState === 'complete'; 
     if (isReady) { 
      _onLoad(); 
     } 
     else { 
      window.onload = _onLoad; 
     } 
     window.onunload = _onUnload; 

エラー: *キャッチされていないにReferenceError:index.tsxで が定義されていない必要:1 インポート*から反応するには、「反応する」; *

私はWebPACKのがインストールされていない、と私はバンドルを作成することができますが、正直なところ、私はしないでくださいそれは私の発展のためであり、私の発展のためにそれを行う理由はないので、それをしたいと思います。

私はAMDを使用できることを知っていますが、少年!私は非常に多くの問題で私を得たdevの環境の後に、AMDで非常に怒った。

他のローダーを使用する必要がありますか?私は今、デフォルトで動作する/ AMDのために設計された知っているrequirejsを使用します。

ありがとうございます。

+0

インポートをインポートするには、モジュールライブラリとして反応するだけで、グローバルライブラリとして使用してください。.tsを.jsにコンパイルし、.jsファイルを.jsファイルに加えて、scripts.typescriptインペアラのタイプを宣言ファイルで応答します。 @ types/react&@ types/react-domをインストールするだけで、ランタイムはチェックされません。 –

答えて

0

はい - 絶対に。

特別な必要がなければ、バンドル業者なしで行くことができます

現在、ブラウザはモジュールの読み込みをサポートしていないため、モジュールローダーが必要になります。 requirejsの代わりにsystemjsを使用することをお勧めします。それはあなたがそれに投げることができるものの広がりと負荷を持っています。ここには物事を設定する方法のexampleと、似たような質問hereがあります。これはあなたを得るでしょう。

注釈として。 SystemJSを直接使用するのではなく、JSPMを使用することをお勧めします。内部的にはsystemjsを使用していますが、そこにあるすべての異なるモジュール用に構成するという面倒を取り除きます。見てください:example

関連する問題