JavaScript 模块导入

在 JavaScript 中,从模块中导出的功能可以通过 import 关键字在另一个模块中访问。

基本语法

import 语句包括两部分 —— 要导入的标识符和标识符应当从哪个模块导入。语法如下:

import ( identifier1, identifier2 ) from "./example.js";

import 后面的大括号表示从给定模块导入的绑定(binding),关键字 from 表示从哪个模块导入给定的绑定,该模块由表示模块路径的字符串指定(被称作模块说明符)。浏览器使用的路径格式与传给 <script> 元素的相同,也就是说,必须把文件扩展名也加上。另一方面,Node.js 则遵循基于文件系统前缀区分本地文件和包的惯例。例如,example 是一个包,而 ./example.js 是一个本地文件。

当从模块中导入一个绑定时,它就好像使用 const 定义的一样。结果是你无法定义另一个同名变量(包括导入另一个同名绑定),也无法在 import 语句前使用标识符或改变绑定的值。

导入单个绑定

假设前面的示例在一个名为“example.js”模块中,我们可以导入并以多种方式使用这个模块中的绑定。

例如,只导入模块中的一个标识符:

// 只导入一个
import { sum } from "./example.js";

console.log(sum(1, 2));  // 3
sum = 1;                 // 抛出一个错误

尽管 example.js 导出的函数不止一个,但这个示例导入的却只有 sum() 函数。如果尝试给 sum 赋新值,结果是抛出一个错误,因为不能给导入的绑定重新赋值。

导入多个绑定

如果你想从示例模块导入多个绑定,则可以明确地将它们列出,例如:

// 导入多个
import { sum, multiply, magicNumber } from "./example.js";

console.log(sum(1, magicNumber));
console.log(multiply(1, 2));

这段代码从 example 模块中导入 3 个绑定(sum、multiply 和 magicNumber),之后就可以像在本地定义一样使用它们。

导入整个模块

特殊情况下,可以导入整个模块作为一个单一的对象。然后所有的导出都可以作为对象的属性使用。例如:

// 导入一切
import * as example from "./example.js";

console.log(example.sum(1, example.magicNumber));
console.log(example.multiply(1, 2));

这段代码从 example.js 中导出的所有绑定被加载到一个被称作 example 的对象中。指定的导出会作为 example 的属性被访问。这种导入格式被称作命名空间导入(namespace import)。因为 example.js 文件中不存在 example 对象,所以它作为 example.js 中所有导出成员的命名空间对象而被创建。

模块语法限制

与 export 一样,import 的一个重要的限制是,必须在其他语句和函数之外使用。

我们不能在一条语句中使用 import,只能在顶部使用它 。比如,下面这段代码会给出语法错误:

function tryImport() {
    import flag from "./example.js";  // 语法错误
}

在 JavaScript 中,export 和 import 关键字被设计成静态的,不能动态地导入或导出绑定。这样的好处之一是,像文本编辑器这样的工具可以轻松地识别模块中哪些信息是可用的。

Leave a Reply