如何在一个JavaScript文件中包含另一个JavaScript文件？有哪几种方式？

JavaScript中是否有类似于CSS中的@import的东西允许你在一个JavaScript文件中包含另一个JavaScript文件？有哪几种方式？

旧版本的JavaScript没有import、include或require，因此开发了许多不同的方法来解决这个问题。但是从2015年(ES6)开始，JavaScript就有了在Node中导入模块的ES6模块标准。，大多数现代浏览器也支持它。为了与旧浏览器兼容，可以使用构建和/或转换工具。

1、ES6模块

从v8.5开始，在Node.js中就支持ECMAScript (ES6)模块，并带有—experimental-modules标志，所有涉及的文件都必须有.mjs扩展名。

// module.mjs
export function hello() {
    return "Hello";
}

// main.mjs
import { hello } from 'module'; // or './module'
let val = hello();  // val is "Hello";

2、浏览器中的ECMAScript模块

自Safari 10.1、Chrome 61、Firefox 60和Edge 16以来，浏览器一直支持直接加载ECMAScript模块(不需要Webpack之类的工具)。

<script type="module">
  import { hello } from './hello.mjs';
  hello('world');
</script>

// hello.mjs
export function hello(text) {
    const div = document.createElement('div');
    div.textContent = `Hello ${text}`;
    document.body.appendChild(div);
}

3、浏览器动态导入

<script type="module">
  import('hello.mjs').then(module => {
      module.hello('world');
    });
</script>

4、Node.js require

老式的模块导入方式，在Node中仍被广泛使用module.exports/require。

// mymodule.js
module.exports = {
    hello: function() {
       return "Hello";
    }
 }
 // server.js
 const myModule = require('./mymodule');
 let val = myModule.hello(); // val is "Hello"