esm 使用方法

esm是什么

esm 是将 javascript 程序拆分成多个单独模块，并能按需导入的标准。和webpack，babel不同的是，esm 是 javascript 的标准功能，在浏览器端和 nodejs 中都已得到实现。使用 esm 的好处是浏览器可以最优化加载模块，比使用库更有效率

esm 标准通过import, export语法实现模块变量的导入和导出

esm 模块的特点

1. 存在模块作用域，顶层变量都定义在该作用域，外部不可见
2. 模块脚本自动采用严格模式
3. 模块顶层的this关键字返回undefined
4. esm 是编译时加载，也就是只有所有import的模块都加载完成，才会开始执行
5. 同一个模块如果加载多次，只会执行一次

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

// 合并导出其他模块的变量
export { name } from './esm_module2.js'
export * from './esm_module2.js'
```
```

import

import语句用来导入其他模块的变量

import { count, incCount, CONST_VAR } from './esm_module1.js';

// 通过as重命名导入的变量
import { addCount as renamedAddCount } from './esm_module1.js';

// 导入默认
import { default as defaultAdd } from './esm_module1.js';
import add from './esm_module1.js';

// 创建模块对象
import * as module1 from './esm_module1.js';