ES模块语法
优质
小牛编辑
132浏览
2023-12-01
以下内容旨在对ES2015规范中定义的模块行为做一个轻量级的参考,因为对导入和导出语句的正确理解对于成功使用Rollup是至关重要的。
导入(Importing)
导入的值不能重新分配,尽管导入的对象和数组可以被修改(导出模块,以及任何其他的导入,都将受到该修改的影响)。在这种情况下,它们的行为与const声明类似。
命名导入(Named Imports)
从源模块导入其原始名称的特定项目。
import { something } from './module.js';
从源模块导入特定项,并在导入时指定自定义名称。
import { something as somethingElse } from './module.js';
命名空间导入(Namespace Imports)
将源模块中的所有内容作为对象导入,将所有源模块的命名导出公开为属性和方法。默认导出被排除在此对象之外。
import * as module from './module.js'
上面的“something”的例子将被附加到作为属性的导入对象上。“module.something”。
默认导入(Default Import)
导入源文件的默认导出
import something from './module.js';
空的导入(Empty Import)
加载模块代码,但不要创建任何新对象。
import './module.js';
这对于polyfills是有用的,或者当导入的代码的主要目的是与原型有关的时候。
导出(Exporting)
命名导出(Named exports)
导出以前声明的值:
var something = true;
export { something };
在导出时重命名:
export { something as somethingElse };
声明后立即导出:
// 这可以与 `var`, `let`, `const`, `class`, and `function` 配合使用
export var something = true;
默认导出(Default Export)
导出一个值作为源模块的默认导出:
export default something;
仅当源模块只有一个导出时,才建议使用此做法。
将默认和命名导出组合在同一模块中是不好的做法,尽管它是规范允许的。
绑定是如何工作的(How bindings work)
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 — 只有 incrementer.js 可以改变这个值。