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

发表于 更新于 阅读次数：

前言

通过ESModule规范实现JS模块化

模块的导入和导出

  • 通过export关键字导出，通过import关键字导入
    • 导出时指定的不是对象，只是结构看起来像一个对象
    • 导入时必须指定文件扩展名
  • 必须通过WebServer访问，而不能直接通过本地文件访问，否则会报跨域错误
  • 默认使用严格模式（usr strict）
demo.js
1
2
3
4
5
6
7
8
9
10
const obj = {};

const fn = function () {
  ...
}

export {
  obj,
  fn,
}
main.js
1
2
3
4
5
import { obj, fn } from "./demo.js";

console.log(obj);

fn();
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

在Script标签内导入模块

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

export {
  obj,
}
1
2
3
4
5
6
7
8
9
<script src="demo.js" type="module"></script>

<script type="module">

  import { obj } from "./demo.js";

  console.log(obj);

</script>

在代码内按需导入

  • 通过import关键字导入时，必须在文件头部，如果希望在代码内按需导入，需要使用import()函数导入
demo.js
1
2
3
4
5
const obj = {};

export {
  obj,
}
main.js
1
2
3
4
5
if (true) {
  import("./demo.js").then(demo => {
    console.log(obj);
  })
}
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

导出全部

  • 导出全部时，导入时需要定义别名
demo.js
1
2
3
4
5
6
7
8
9
10
const obj = {};

const fn = function () {
  ...
}

export {
  obj,
  fn,
}
main.js
1
2
3
4
5
import * as demo from "./demo.js";

console.log(demo.obj);

demo.fn();
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

导入并导出全部

demo.js
1
2
3
4
5
6
7
8
9
10
const obj = {};

const fn = function () {
  ...
}

export {
  obj,
  fn,
}
main.js
1
export * from "./demo.js";
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

默认导出

  • 一个模块只能定义一个默认导出
  • 导入时可以指定任意变量名

默认导出变量

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

export default obj;
main.js
1
2
3
import o from "./demo.js";

console.log(o);
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

默认导出函数

demo.js
1
2
3
4
5
const fn = function () {
  ...
}

export default fn;
main.js
1
2
3
import f from "./demo.js";

f();
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

指定别名

导出时指定别名

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

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

console.log(o);
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

导入时指定别名

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

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

console.log(o);
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

导入时给整个模块起别名

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

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

console.log(demo.o);
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

定义时直接导出

定义变量时直接导出

demo.js
1
export const obj = {};
main.js
1
2
3
import { obj } from "./demo.js";

console.log(obj);
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

定义函数时直接导出

demo.js
1
2
3
export function fn() {
  ...
}
main.js
1
2
3
import { fn } from "./demo.js";

fn();
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

定义类时直接导出

demo.js
1
2
3
export class Cls() {
  ...
}
main.js
1
2
3
import { Cls } from "./demo.js";

const cls = new Cls();
1
2
<script src="demo.js" type="module"></script>
<script src="main.js" type="module"></script>

查看导入元数据

1
console.log(import.meta);

完成

参考文献

哔哩哔哩——微笑专业教前端