Skip to content

ES 模块语法

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

导入

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

具名导入

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

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

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

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

名称空间导入

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

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

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

默认导入

导入源模块的 default export

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

无命名导入

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

js
import './module.js';
import './module.js';

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

动态导入

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

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

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

导出

具名导出

导出先前声明的值:

js
const something = true;
export { something };
const something = true;
export { something };

导出时重命名:

js
export { something as somethingElse };
export { something as somethingElse };

声明后立即导出值:

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

默认导出

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

js
export default something;
export default something;

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

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

绑定是如何工作的?

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

查看示例:

js
// incrementer.js
export let count = 0;

export function increment() {
	count += 1;
}
// incrementer.js
export let count = 0;

export function increment() {
	count += 1;
}
js
// main.js
import { count, increment } from './incrementer.js';

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

count += 1; // Error - 只有 incrementer.js 可以更改这个变量
// main.js
import { count, increment } from './incrementer.js';

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

count += 1; // Error - 只有 incrementer.js 可以更改这个变量

基于 MIT 协议发布