如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？

在 ES6 Modules 2015 引入之前的原生JavaScript中，没有导入、包含或要求功能。在此之前，我们可以使用 DOM 中的脚本标签将 JavaScript 文件加载到另一个 JavaScript 文件中，该脚本将立即下载并执行。

现在，在 ES6 模块发明之后，已经开发和讨论了许多不同的方法来解决这个问题。

ES6 模块：自 v8.5 以来，Node.js 已支持 ECMAScript (ES6) 模块。在这个模块中，我们在一个文件中定义导出的函数，并在另一个示例中导入它们。
从另一个函数调用 JavaScript 文件有两种流行的方法，如下所示：

• 阿贾克斯技术
• 连接文件

Ajax 技术示例：

• 名为“main.js”的外部 JavaScript 文件

  // This alert will export in the main file
  alert("Hello Geeks")
  

• 主文件：此文件将导入上述“main.js”文件

    
  
      
          Calling JavaScript file from
          another JavaScript file
      
        
      
          var script = document.createElement('script');
            
          script.src = 
  "https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js";
            
          document.head.appendChild(script)
      
  
    
  
  
    

• 输出：
  

连接文件示例：此处将多个 JavaScript 文件导入单个 JavaScript 文件并从函数调用该主 JavaScript 文件。

• 名为“main.js”的外部 JavaScript 文件

  // This alert will export in the main file
  alert("Hello Geeks")
  

• 外部 JavaScript 文件“second.js”

  // This alert will export in the main file
  alert("Welcome to Geeksforgeeks")
  

• 外部 JavaScript 文件“master.js”

  function include(file) {
    
    var script  = document.createElement('script');
    script.src  = file;
    script.type = 'text/javascript';
    script.defer = true;
    
    document.getElementsByTagName('head').item(0).appendChild(script);
    
  }
    
  /* Include Many js files */
  include('https://media.geeksforgeeks.org/wp-content/uploads/20190704153043/main.js');
  include('https://media.geeksforgeeks.org/wp-content/uploads/20190704162640/second.js');
  

• 主文件：此文件将导入上述“master.js”文件

    
  
      
          Calling JavaScript file from
          another JavaScript file
      
        
      
      
  
    
  
  
             

• 输出：
  main.js 文件导入：
  
  second.js 文件导入：