1.esm是什么
esm 是将 javascript 程序拆分成多个单独模块,并能按需导入的标准。和webpack
,babel
不同的是,esm 是 javascript 的标准功能,在浏览器端和 nodejs 中都已得到实现。使用 esm 的好处是浏览器可以最优化加载模块,比使用库更有效率
esm 标准通过import
, export
语法实现模块变量的导入和导出
esm 模块的特点
- 存在模块作用域,顶层变量都定义在该作用域,外部不可见
- 模块脚本自动采用严格模式
- 模块顶层的
this
关键字返回undefined
- esm 是编译时加载,也就是只有所有
import
的模块都加载完成,才会开始执行 - 同一个模块如果加载多次,只会执行一次
2.export
export
语句用来导出模块中的变量
// 导出变量
export let count = 1;
export const CONST_VAR = 'CONST_VAR';
// 导出函数
export function incCount() {
count += 1;
}
// 导出类
export class Demo {
}
function add(x) {
return x + count;
}
// 使用export导出一组变量
export {
count,
add,
// 使用as重命名导出的变量
add as addCount,
}
// 导出default
export default add
// 合并导出其他模块的变量
expor