index.md

title	ES 模块语法

{{ $frontmatter.title }}

[[toc]]

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

导入 {#importing}

导入的值不能被重新分配，尽管导入的对象和数组 可以 被 mutated（并且导出模块和任何其他导入将受到 mutation 的影响）。也就是说，它们的行为类似于 const 声明。

具名导入 {#named-imports}

使用源模块中的原始名称进行导入。

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

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

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

名称空间导入 {#namespace-imports}

将源模块中的所有内容作为一个对象导入，该对象将所有源模块的 named exports 公开为属性和方法。

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

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

默认导入 {#default-import}

导入源模块的 default export。

import something from './module.js';

无命名导入 {#empty-import}

加载模块代码，但不要使任何新对象可用。

import './module.js';

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

动态导入 {#dynamic-import}

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

import('./modules.js').then(({ default: DefaultExport, NamedExport }) => {
	// 用这个模块做点什么...
});

这对于代码分解应用程序和动态使用模块非常有用。

<<<<<<< HEAD

导出 {#exporting}

=======

Source Phase Import

Import the Source Phase representation of a module without executing it, using the Source Phase Imports Proposal.

This is useful for importing compiled WebAssembly modules through the module system without relying on the fetch API:

import source myModule from './module.wasm';

Source phase imports must be external — Rollup will raise an error if a source phase import resolves to a non-external module. They are preserved as import source declarations in es output format. Other output formats (cjs, amd, iife, umd, system) do not support source phase imports and will raise an error if one is present.

Exporting

6b725b9f0aae80e4ca4bf3e7b9763b153b850d8b

具名导出 {#named-exports}

导出先前声明的值：

const something = true;
export { something };

导出时重命名：

export { something as somethingElse };

声明后立即导出值：

// `var`, `let`, `const`, `class`, 和 `function` 都是有效的
export const something = true;

默认导出 {#default-export}

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

export default something;

仅当你的源模块只有一个导出时才推荐这种做法。

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

绑定是如何工作的？ {#how-bindings-work}

ES 模块导出 live bindings，而不是值，因此可以在初始导入后更改值。

查看示例:

// 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 - 只有 incrementer.js 可以更改这个变量