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

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

根据您的限制和设计，有几个可能的答案。

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

更可取，人们会使用类似 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 或类似的)将文件编译成一个文件。该工具使用您选择的 uglify.js或 Google Closure Compiler缩小并连接所有文件，就像您(显然)已经完成的那样。

祝你好运!