2016-05-11 5 views
2

jquery $.getScriptを使用してwebpackによってコンパイルされたコードを含むbundle.jsを読み込もうとしています。ただし、空白のページが表示されます。しかし、私は通常のスクリプトタグを試したときに動作します。 $.getScriptを使用する理由は、2つの環境があり、本番環境でのみ追加のスクリプトをロードしたいからです。

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Single Page Program Demo</title> 

    <script src="../Programs/2999/js/jquery-2.2.3.min.js"></script> 
    <script> 
     /* Environment - (options: development/production) */ 
     var env = 'development'; 

     /* Load all scripts related to pi shell integration in sequence */ 
     $.getMultiScripts = function(arr, path) { 
      var _arr = $.map(arr, function(scr) { 
       return $.getScript((path||"") + scr); 
      }); 

      _arr.push($.Deferred(function(deferred){ 
       $(deferred.resolve); 
      })); 

      return $.when.apply($, _arr); 
     } 

     var script_arr; 

     if (env == 'production'){ 

      script_arr = [ 
       'jquery-2.2.3.min.js', 
       'json2.js', 
       'jquery.validate.min.js', 
       'PIH.PIPlatform.ClientSideStorage.js', 
       'jquery.idletimer.js', 
       'jquery.idletimeout.js', 
       'DataTransfer.js', 
       'pi_utility.js', 
       'pi_data.js', 
       'bundle.js' 
      ]; 
     } 

     else { 
      script_arr = [ 
       'bundle.js' 
      ]; 
     } 

     $.getMultiScripts(script_arr, '../Programs/2999/js/').done(); 
    </script> 
</head> 

<body> 
    <div id="app"></div> 

    <!-- This works --> 
    <!-- <script src="../Programs/2999/js/bundle.js"></script> --> 
</body> 

</html> 
+0

これを確認してくださいhttps://github.com/ded/script.js/このプロジェクトではこれを成功裏に使用しました。 – Vishwanath

+0

2つの異なるファイルをバンドルしていませんか? 1つはプロダクション用、もう1つはdev用? – vintem

答えて

1

RequireJSを使用してスクリプトを管理することをお勧めします。

関連する問題