javascript中的esm，import, export

最新推荐文章于 2024-06-04 09:09:57 发布

暴富979

最新推荐文章于 2024-06-04 09:09:57 发布

阅读量1k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_66471060/article/details/127256602

版权

本文详细介绍了JavaScript的ESM（模块系统），包括export用于导出模块变量，import用于导入模块，以及它们之间的区别。重点阐述了ESM的值引用特性，即模块导出的是值的引用，允许在模块内部修改值后被导入方获取到更新。此外，还讨论了在HTML中使用ESM的方法，ESM的加载机制，以及动态加载模块的新特性。

摘要由CSDN通过智能技术生成

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