【笔记】通过ESModule规范实现JS模块化

发表于 更新于 阅读次数：

前言

通过ESModule规范实现JS模块化

导出模块

  • 导出时指定的不是对象，只是结构看起来像一个对象
  • 默认使用严格模式（usr strict）

先定义再导出

demo.js
1
2
3
4
5
const obj = {};

export {
  obj,
}

导出时指定别名

demo.js
1
2
3
4
5
const obj = {};

export {
  obj as o,
}

定义时直接导出

demo.js
1
export const obj = {};

导入模块

  • 导入时必须指定文件扩展名
  • 必须通过WebServer访问，而不能直接通过本地文件访问，否则会报跨域错误
main.js
1
2
3
import * as demo from "./demo.js";

console.log(demo.obj);
main.js
1
2
3
import { obj } from "./demo.js";

console.log(obj);

导入时指定别名

main.js
1
2
3
import { obj as o } from "./demo.js";

console.log(o);

按需导入

  • import()函数可以在代码内使用而不只是代码头部
main.js
1
2
3
import("./demo.js").then(function (demo) {
  console.log(demo.obj);
});

在HTML中使用模块

1
2
3
<script src="demo.js" type="module"></script>

<script src="main.js" type="module"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="demo.js" type="module">
  const obj = {};

  export {
    obj,
  }
</script>

<script type="module">
  import { obj } from "./demo.js";

  console.log(obj);
</script>

默认导出和导入

导出

  • 一个模块只能定义一个默认导出
demo.js
1
2
3
const obj = {};

export default obj;

导入

  • 导入时可以指定任意别名
main.js
1
2
3
import o from "./demo.js";

console.log(o);

导入全部并立即导出全部

demo.js
1
export * from "./demo.js";

查看导入元数据

1
console.log(import.meta);

完成