如何在不使用document.write的情況下將多個js文件加載到單個javascript文件中？

Question

var head = document.getElementsByTagName("head")[0];
function loadjscssfile(filename, filetype) {
    if (filetype == "js") {
        var fileref = document.createElement('script');
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", filename);
        //fileref.async = false;
    }
    else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
        //fileref.async = false;
    }
    if (typeof fileref != "undefined")
        console.log("check file", head.appendChild(fileref));
        fileref.sync = true;
    head.appendChild(fileref);
}

我正在使用上述功能，但出現的錯誤很少，我認為文件不是一個接一個地加載。 我想加載一個js文件。
如何一個接一個地加載多個腳本文件。

loadjscssfile ("js/scripts/jquery.js", "js");    
loadjscssfile ("js/scripts/angular.min.js", "js");   
loadjscssfile ("js/scripts/angular-ui-router.min.js", "js");   
loadjscssfile ("js/scripts/angular-resource.min.js", "js");    
loadjscssfile "js/scripts/angular-route.min.js", "js");       
loadjscssfile ("js/scripts/moment.min.js", "js");    
loadjscssfile("js/scripts/humanize-duration.js", "js");    
loadjscssfile("js/scripts/angular-timer.min.js", "js");     
loadjscssfile("js/scripts/angular-translate.min.js", "js");    
loadjscssfile("js/scripts/angular-translate-loader-url.min.js", "js");   

Answer 1

也許您可以像Grunt或Gulp這樣的任務運行程序自動將JS文件和/或CSS文件注入HTML？

對於Grunt，請使用fileblocks插件 ；對於gulp ，請使用inject插件

Answer 2

看一下RequireJS 。 您可以按需加載js文件。

這是一個示例http://requirejs.org/docs/start.html

Answer 3

Webpack可以為您提供幫助。 它可以從多個文件中生成一個.js文件，但請小心-對.min.js文件使用混淆處理會給您帶來許多問題，當您制作一個（或兩個）大.js文件時請不要使用它