ES 模块语法

• 导入
  • 命名导入
  • 命名空间导入
  • 默认导入
  • 空导入
  • 动态导入
• 导出
  • 命名导出
  • 默认导出
• 绑定工作原理

以下内容旨在作为对 ES2015 规范 中定义的模块行为的轻量级参考，因为正确理解导入和导出语句对于成功使用 Rollup 至关重要。

导入

导入的值不能重新分配，但导入的对象和数组可以被修改（导出模块以及任何其他导入者将受到修改的影响）。从这个意义上说，它们的行为类似于const声明。

命名导入

从源模块导入特定项目，并使用其原始名称。

import { something } from './module.js';

从源模块导入特定项目，并在导入时分配自定义名称。

import { something as somethingElse } from './module.js';

命名空间导入

从源模块导入所有内容，作为对象，该对象将所有源模块的命名导出公开为属性和方法。

import * as module from './module.js';

上面的something示例将作为属性附加到导入的对象，例如module.something。如果存在，则可以通过module.default访问默认导出。

默认导入

导入源模块的默认导出。

import something from './module.js';

空导入

加载模块代码，但不创建任何新对象。

import './module.js';

这对于 polyfill 或当导入代码的主要目的是处理原型时很有用。

动态导入

使用 动态导入 API 导入模块。

import('./modules.js').then(({ default: DefaultExport, NamedExport }) => {
	// do something with modules.
});

这对于代码拆分应用程序和动态使用模块很有用。

导出

命名导出

导出先前声明的值

const something = true;
export { something };

在导出时重命名

export { something as somethingElse };

在声明时立即导出值

// this works with `var`, `let`, `const`, `class`, and `function`
export const something = true;

默认导出

将单个值导出为源模块的默认导出

export default something;

仅当源模块只有一个导出时才建议使用此做法。

在同一个模块中混合默认导出和命名导出是一种不好的做法，尽管规范允许这样做。

绑定工作原理

ES 模块导出实时绑定，而不是值，因此值可以在最初导入后更改，如 此演示 中所述。

// incrementer.js
export let count = 0;

export function increment() {
	count += 1;
}

// main.js
import { count, increment } from './incrementer.js';

console.log(count); // 0
increment();
console.log(count); // 1

count += 1; // Error — only incrementer.js can change this