如何在开发和生产中动态包含脚本

Question

我想要完成的伪代码：

if(in dev environment){
   //write unminified scripts to the head tag
}
else{ // in production
  // write the minified distribution script to the head
}

---

选项 1。） 在 Chrome 桌面浏览器中间歇性工作，在 Safari Mobile 中间歇性工作。

function write_to_head (path ,js_file_src){
  var js_script = document.createElement('script');
  js_script.type = "text/javascript";
  js_script.src = path + js_file_src;
  document.getElementsByTagName('head')[0].appendChild(js_script);
}

选项 2。） 在 Chrome 中 100% 工作，在 Safari Mobile 中间歇性工作。在 async:false 时似乎也能更好地工作，但这是不行的，因为它可能会阻止用户交互。

function load_script(path ,js_file_src){    
    $.ajax({
      async:true,     // false may block user interaction               
      type:'GET',
      url:path +""+ js_file_src,
      data:null,
      cache: true,
      success:_onsuccess,
      error: _onerror,
      dataType:'script'
    });   

}

我根据我是在开发环境还是生产环境中调用以下函数之一。

var dev_scripts = ["script1.js","script2.js","script3.js",........etc];
var prod_scripts = ["all-dist.min.js",........etc];

function load_dev(){
  for(var i=0;i<dev_scripts.length;i++){
     //  call write_to_head ("/api/path/",dev_scripts [i] );
     //  or  
     //  load_script("/api/path/",dev_scripts [i] );
  }
}


function load_prod(){
  for(var i=0;i<prod_scripts .length;i++){
     //  call write_to_head ("/api/path/",prod_scripts [i] );
     //  or  
     //  load_script("/api/path/",prod_scripts [i] );
  }
}

有没有更好的方法可以在所有移动和桌面浏览器上完成我上面讨论的内容？

Answer 1

有几个可能的答案，具体取决于您的限制和设计。

好的 - 这是从客户端手动附加文件的规范方式，无需任何外部库。您正在复制一个“标签管理器”，这是一项为您管理这些列表的服务。 BrightTag 就是这样做的供应商的一个例子。

更优选，假设（1）您的所有脚本与页面位于同一域中（避免 CORS 问题）和（ 2) 它们可以异步加载。

最佳实践 要求您正确使用 require.js，并设计所有模块以遵循 AMD 规范。

在开发案例中，您将使用那些文档中描述的<script src="some/require.js" data-main="my/root/file.js"></script> 模式，该模式会加载 require.js 库，然后加载根模块，然后在执行之前拉入所有其他声明的依赖项。

在生产情况下，您可以使用require.js packaging tool（r.js 或类似文件）将文件编译成一个文件。该工具使用您选择的uglify.js 或Google Closure Compiler 来缩小和连接所有文件，就像您（显然）已经完成的那样。

祝你好运！