ES6 模块

深入理解ES6 前端模块化

模块特性

• 被导入的模块自动运行在严格模式下。
• 模块顶部创建的变量不会被添加到全局共享作用域，仅在模块的顶级作用域中存在。
• 模块必须导出一些外部代码可以访问的元素，也可以从其他模块导入元素。
• 模块顶部的 this 指向 undefined。
• 模块只能单行注释。

export

export 用于将一部分元素暴露给其他模块引用（只读）：

export {name1, name2 as XX, ..., nameN};
export let name1 = XX, name2 = ...., nameN; //also var, const
export function FuncName(){...};
export name1;
export class ClassName{...}
export default name1;
export default expression;
export {name1 as default, ...};
export * from "./xxxx.js"

as 可以修改导出时的标识名；一个模块只能有一个 default 导出； * 将整个模块作为命名空间进行导出； from 可以从另一个模块导出自身导入的绑定。

import

import 用于导入另一个模块出的绑定：

import {name1 as XX, name2} from "./xxxx.js";
import defaultExport from "./xxxx.js";
import * as namespaceObj from "./xxxx.js"

as 可以对导入的绑定重命名；不使用 {} 表示导入默认绑定； * 将模块作为一个对象导入，可以用 . 点方法访问其元素。

注意事项

1. export 和 import 通常在模块的顶部进行声明，因为它们必须在其他语句和函数之外使用。
2. import 导入的是只读绑定，标识符只有在原模块中才能修改：

export var name = "Nicholas";
export function setName(newName){ name = newName; }

import {name, setName} from "./example.js";
console.log(name);  //"Nicholas"
setName("zhao4");
console.log(name);  //"zhao4"
name = "111";   //throw an error!

在另一个模块中调用导入的函数，会回到该函数的原模块中执行，尝试修改导入的绑定会抛出错误。

模块路径

• / 根目录
• ./ 当前目录
• ../ 上级目录
• URL格式