随着 JavaScript 程序的复杂性不断增加，我们越来越需要组织我们的代码和依赖项。 ECMAScript 2020 引入了一种新的语言功能：静态导入（static import）。静态导入让我们在编译时明确指明我们的依赖项，而不是在运行时加载模块。
静态导入的语法
ECMAScript 2020 中，我们可以使用 import 语句来导入模块。例如，我们可以这样导入一个名为 example 的模块：
import * as example from './example.js';
这将把 example.js 模块中导出的所有内容赋值给 example 对象上。我们也可以只导入部分内容：
import {foo, bar} from './example.js';这将只导入 example.js 模块中导出的 foo 和 bar 两个变量。我们也可以给导入的变量起别名：
import {foo as myFoo} from './example.js';这将把 example.js 模块中导出的 foo 变量赋值给 myFoo 变量。
静态导入的优点
静态导入带来了很多好处。首先，它使代码更容易组织和维护。通过明确列出我们的依赖项，我们可以更快地了解一个代码库中各个模块之间的关系。这也使得我们能够更好地重构代码，因为我们可以更容易地知道需要更改的文件和它们之间的依赖关系。
静态导入还可以使我们的应用更加可靠。通过将依赖项明确列出，我们可以防止应用程序意外地引入不必要的代码。同样，由于静态导入是在编译时进行的，因此它可以在运行时之前发现错误，从而提高了我们的应用的可靠性。
静态导入的示例代码
让我们来看一个使用静态导入的具体示例。假设我们有一个名为 calculator.js 的模块，其中导出了一个名为 add 的函数：
export function add(a, b) {
return a + b;
}现在，我们想要在另一个模块中使用这个函数。我们可以这样做：
import {add} from './calculator.js';
console.log(add(2, 3)); // 输出 5通过用 import 语句导入 calculator.js 模块中导出的 add 函数，我们可以在另一个文件中使用它。注意，我们没有将整个 calculator.js 模块导入，而是只导入了我们需要的一个函数。
总结
ECMAScript 2020 中的静态导入功能让我们以一种更清晰、更可靠的方式来组织我们的代码。它使得编写大型 JavaScript 应用程序变得更容易，同时也提高了应用程序的可靠性。随着静态导入的普及，我们将看到更多的 JavaScript 库和框架采用这种方式来组织代码和依赖项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64964b8d48841e989434a8b2