ES 模块语法

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

¥The following is intended as a lightweight reference for the module behaviors defined in the ES2015 specification, since a proper understanding of the import and export statements are essential to the successful use of Rollup.

导入

¥Importing

尽管导入的对象和数组可以发生突变（并且导出模块和任何其他导入器将受到突变的影响），但导入的值无法重新分配。这样，它们的行为与 const 声明类似。

¥Imported values cannot be reassigned, though imported objects and arrays can be mutated (and the exporting module, and any other importers, will be affected by the mutation). In that way, they behave similarly to const declarations.

命名导入

¥Named Imports

从源模块导入特定项目及其原始名称。

¥Import a specific item from a source module, with its original name.

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

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

¥Import a specific item from a source module, with a custom name assigned upon import.

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

命名空间导入

¥Namespace Imports

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

¥Import everything from the source module as an object which exposes all the source module's named exports as properties and methods.

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

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

¥The something example from above would then be attached to the imported object as a property, e.g. module.something. If present, the default export can be accessed via module.default.

默认导入

¥Default Import

导入源模块的默认导出。

¥Import the default export of the source module.

import something from './module.js';

空导入

¥Empty Import

加载模块代码，但不提供任何新对象。

¥Load the module code, but don't make any new objects available.

import './module.js';

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

¥This is useful for polyfills, or when the primary purpose of the imported code is to muck about with prototypes.

动态导入

¥Dynamic Import

使用动态导入 API 导入模块

¥Import modules using the dynamic import API.

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

这对于代码分割应用和即时使用模块非常有用。

¥This is useful for code-splitting applications and using modules on-the-fly.

导出

¥Exporting

命名导出

¥Named exports

导出之前声明的值：

¥Export a value that has been previously declared:

const something = true;
export { something };

导出时重命名：

¥Rename on export:

export { something as somethingElse };

声明后立即导出值：

¥Export a value immediately upon declaration:

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

默认导出

¥Default Export

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

¥Export a single value as the source module's default export:

export default something;

仅当你的源模块只有一个导出时才建议采用这种做法。

¥This practice is only recommended if your source module only has one export.

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

¥It is bad practice to mix default and named exports in the same module, though it is allowed by the specification.

绑定如何工作

¥How bindings work

ES 模块导出实时绑定，而不是值，因此在按照这个演示最初导入值后可以更改值：

¥ES modules export live bindings, not values, so values can be changed after they are initially imported as per this demo:

// 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

ES 模块语法

导入 ​

命名导入 ​

命名空间导入 ​

默认导入 ​

空导入 ​

动态导入 ​

导出 ​

命名导出 ​

默认导出 ​

绑定如何工作 ​

导入