JavaScript import 关键字
最后修改于 2025 年 4 月 16 日
在本文中，我们将展示如何使用 JavaScript 中的 import 关键字导入模块。import 语句用于从其他模块导入绑定。
import 关键字
import 关键字是 ES6 模块的一部分，它允许你将功能从其他文件引入到你当前的模块中。它实现了代码组织和在应用程序不同部分之间的重用。
导入的值是对原始模块导出的只读实时绑定。原始模块中的更改会反映在导入模块中。这在模块之间创建了一个动态链接。
Import 语句必须位于模块的顶层，并且不能在函数或块内使用。它们被提升到模块作用域的顶部。模块说明符必须是字符串字面量。
基本的命名导入
import 的最简单形式是从模块中引入特定的命名导出。
// mathUtils.js
export const PI = 3.14159;
export function square(x) { return x * x; }
// main.js
import { PI, square } from './mathUtils.js';
console.log(PI); // 3.14159
console.log(square(5)); // 25
此示例显示了如何从另一个模块导入特定的命名导出。花括号包含我们要导入的导出的名称。路径必须相对于当前文件或绝对路径。
$ node main.js 3.14159 25
使用重命名进行导入
你可以使用 as 关键字重命名导入，以避免命名冲突。
// mathUtils.js
export function square(x) { return x * x; }
// main.js
import { square as sq } from './mathUtils.js';
console.log(sq(3)); // 9
在这里，我们导入了 square 函数，但在我们的模块中将其重命名为 sq。当你需要避免命名冲突或希望在本地使用更方便的名称时，这很有用。
$ node main.js 9
将所有导出导入为命名空间
你可以将模块中的所有导出导入为单个命名空间对象。
// mathUtils.js
export const PI = 3.14159;
export function square(x) { return x * x; }
// main.js
import * as math from './mathUtils.js';
console.log(math.PI); // 3.14159
console.log(math.square(4)); // 16
* as math 语法从 mathUtils.js 导入所有导出，并将它们作为 math 对象的属性提供。当你需要从模块中导入许多导出时，这很有用。
$ node main.js 3.14159 16
默认导入
模块可以有一个默认导出，可以在没有花括号的情况下导入。
// logger.js
export default function(message) {
console.log(`LOG: ${message}`);
}
// main.js
import log from './logger.js';
log('Hello world'); // LOG: Hello world
默认导入不使用花括号，并且可以在导入模块中命名为任何名称。每个模块只能有一个默认导出。这通常用于模块的主要功能。
$ node main.js LOG: Hello world
混合默认和命名导入
你可以在单个语句中组合默认导入和命名导入。
// utils.js
export default function(config) {
console.log('Initializing with', config);
}
export const VERSION = '1.0.0';
// main.js
import init, { VERSION } from './utils.js';
init({ debug: true });
console.log('Version:', VERSION);
此示例显示了如何从同一模块导入默认导出和命名导出。默认导入在前，然后是花括号中的命名导入。
$ node main.js
Initializing with { debug: true }
Version: 1.0.0
动态导入
JavaScript 支持使用 import() 函数进行动态导入。
// math.js
export function add(a, b) { return a + b; }
// main.js
async function loadMath() {
const math = await import('./math.js');
console.log(math.add(2, 3)); // 5
}
loadMath();
动态导入返回一个 Promise，该 Promise 解析为模块的导出。这允许在需要时进行模块的惰性加载。import() 函数可以在代码中的任何位置使用。
$ node main.js 5
仅用于副作用的导入
有时你只需要为了其副作用而导入一个模块，而不是为了其导出。
// analytics.js
console.log('Analytics initialized');
export const track = () => { /* ... */ };
// main.js
import './analytics.js';
console.log('Main module running');
这会导入模块，而不会导入其任何导出。模块的代码在导入时运行，这可能会初始化某些内容或修改全局状态。这在 polyfill 或初始化脚本中很常见。
$ node main.js Analytics initialized Main module running
来源
在本文中，我们演示了如何使用 import 关键字在 JavaScript 中使用模块。我们涵盖了各种导入语法形式和用例。