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

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。） 100% 的时间在 Chrome 中工作，在 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

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

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

更优选，人们会使用类似 require.js 的东西来加载依赖项，假设 (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 or similar) to compile the files into one file. The tool uses your choice of uglify.js or Google Closure Compiler 缩小并连接所有文件，就像您（显然）已经完成的那样。

祝你好运！

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

How to include a script dynamically in dev and production

javascript

jquery

performance

development-environment

production-environment

}