如何在一个 JavaScript 文件中引入另一个 JavaScript 文件

在早期版本的 JavaScript 中，没有提供原生的模块导入功能，因此开发者们尝试过各种不同的方法来解决这个问题。然而，自 2015 年 (ES6) 以来，JavaScript 引入了 ES6 模块标准，这使得在 Node.js 中导入模块变得更加规范。现代浏览器也广泛支持这一标准。

为了与旧版浏览器兼容，可以使用例如 Webpack 和 Rollup 这样的构建工具，或使用 Babel 这样的转译工具。

ES6 模块

自 Node.js v8.5 起，ECMAScript (ES6) 模块已经得到支持，当时需要使用 --experimental-modules 标志。而在至少 Node.js v13.8.0 之后，这一功能不再需要额外的标志。在 package.json 中使用 "type": "module" 或将文件扩展名更改为 .mjs，都可以启用 ESM（ES 模块）。

使用 package.json 配置模块类型

在 package.json 中添加如下配置：

{
   
    "type": "module"
}

然后在 module.js 文件中：

export function hello() {
   
    return "Hello";
}

在 main.js 文件中：

import {
    hello } from './module.js';
let val = hello();  // val 是 "Hello"

使用 .mjs 扩展名

若使用 .mjs 扩展名，在 module.mjs 文件中：

export function hello() {
   
    return "Hello";
}

在 main.mjs 文件中：

import {
    hello } from './module.mjs';
let val = hello