javascript - 外部ファイルを JSZip にパッケージ化する

Question

私はコード エディターで作業しており、必要なライブラリを確認します。Normalize または FontAwesome と言う限り、コードをエクスポートすると、サーバーからの zip ファイルがJSZipに読み込まれ 、すべてのライブラリが zip に組み込まれます。ハイパーリンクなしのファイル。

ロードするすべてのライブラリ (正確には 38) がサーバー上にあります。ただし、 JSZip のWeb サイトにリストされているデモ のFilereaderとAJAXに従って、JSZipの zip ファイルにファイルをロードしただけです。

基本的に、複数の zip ファイルを新しい jszip パッケージにロードしようとしています。

$(document).ready(function() {
  var download_to_textbox = function (url, el) {
        return $.get(url, null, function (data) {
          el.val(data);
        }, 'text');
      };

  // Add/Remove Libraries
  $("[data-action=check]").on("change", function() {
    if ( $("#jquery").is(":checked") ) {
      $('.jquery').val(""); download_to_textbox('http://code.jquery.com/jquery-latest.min.js', $('.jquery'));
      $('.jquery').trigger("change");
      $(".jqueryzip").val("  zip.file('js/jquery.js', $('.jquery').val());");
    } else {
      $('.jqueryzip').val("");
    }

    if ( $("#bootstrap").is(":checked") ) {
     
      $('.bootstrap').val(""); download_to_textbox('http://getbootstrap.com/dist/css/bootstrap.css', $('.bootstrap1')); download_to_textbox('http://getbootstrap.com/dist/js/bootstrap.js', $('.bootstrap2'));
      $('.bootstrap1, .bootstrap2').trigger("change");
      $(".bootstrapzip").val("zip.file('css/bootstrap.css', $('.bootstrap1').val());\n  zip.file('js/bootstrap.js', $('.bootstrap2').val());");
    } else {
      $('.bootstrapzip').val("");
    }
    
    $("[data-action=fulljszipfilescode]").val(function() {
      return $.map($(".jszippackage"), function (el) {
        return el.value;
      }).join("\n");
    });
    $(".jszippackage").trigger("change");
    
    $("[data-action=fulljszipcode]").val(function() {
      return $.map($(".jszipcode"), function (el) {
        return el.value;
      }).join("\n");
    });

    $("[data-action=fulljszipcode]").val("$('[data-action=download]').unbind().click(function() {\n  var zip = new JSZip();\n  zip.file('Hello.txt', 'Hello World');\n  " + $("[data-action=fulljszipfilescode]").val() + "\n  var content = zip.generate({type:'blob'});\n  saveAs(content, '123test.zip');\n});");
    
    $("#applyscript script").remove();
    $("#applyscript").append("<scr" + "ipt>" + $("[data-action=fulljszipcode]").val() + " </scr" + "ipt>");
  });
});

.hide {
  display: none;
}

.txtcenter {
  text-align: center;
}

.fill {
  width: 100%;
}

.hide {
  display: none;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>

<div class="container">
  <div class="form-group txtcenter">
    <a class="btn btn-primary btn-lg fill" data-action="download">Download</a>
  </div>
  <div class="form-group">
    <textarea class="form-control" data-action="fulljszipcode"></textarea>
    <textarea class="form-control" data-action="fulljszipfilescode"></textarea>
  </div>
  <div class="form-group">
    <label class="checkbox">
      <input data-action="check" type="checkbox" id="bootstrap">
      Bootstrap (latest)
    </label>
  </div>
  <div class="form-group">
    <textarea class="form-control jszipcode bootstrap bootstrap1"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control jszipcode bootstrap bootstrap2"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control bootstrapzip jszippackage"></textarea>
  </div>
  <div class="form-group">
    <label class="checkbox">
      <input data-action="check" type="checkbox" id="jquery">
      JQuery (latest)
    </label>
    <textarea class="form-control jszipcode jquery"></textarea>
  </div>
  <div class="form-group">
    <textarea class="form-control jqueryzip jszippackage"></textarea>
  </div>

  <div id="applyscript" class="hide"></div>
</div>