ES模块知识详解_就不告絮你的博客-CSDN博客_es 模块
ES 模块是什么?
ECMAScript模块(简称ES模块)是一种JavaScript代码重用的机制,于2015年推出,一经推出就受到前端开发者的喜爱。在2015之年,JavaScript 还没有一个代码重用的标准机制。多年来,人们对这方面的规范进行了很多尝试,导致现在有多种模块化的方式。
你可能听说过AMD模块,UMD,或CommonJS,这些没有孰优孰劣。最后,在ECMAScript 2015中,ES 模块出现了。
我们现在有了一个“正式的”模块系统。
ES 模块无处不在?
理论上,ES 模块应该在所有JavaScript环境中。实际上,ES 模块的主要应用还是在浏览器上。
2020年5月,Node.js v12.17.0 增加了在不使用标记前提下对ECMAScript模块的支持。 这意味着我们现在可以在Node.js中使用import和export,而无需任何其他命令行标志。
ECMAScript模块要想在任何JavaScript环境通用,可能还需要很长的路要走,但方向是正确的。
ES 模块是什么样的
ES 模块是一个简单的文件,我们可以在其中声明一个或多个导出。以下面utils.js为例:
// utils.js
export function funcA() {
return "Hello named export!";
}
export default function funcB() {
return "Hello default export!";
}
1
2
3
4
5
6
7
8
这里有两个导出。
第一个是命名导出,后面是export default,表示为默认导出。
假设我们的项目文件夹中有一个名为utils.js的文件,我们可以将这个模块提供的对象导入到另一个文件中。
如何从 ES模块 导入
假设我们在项目文中还有一个Consumer.js的文件。 要导入utils.js公开的函数,我们可以这样做:
// consumer.js
import { funcA } from "./util.js";
1
2
这种对应我们的命名导入方式.
如果我们要导入 utils.js 中的默认导出也就是 funcB 方法,我们可以这样做:
// consumer.js
import { funcA } from "./util.js";
1
2
当然,我们可以导入同时导入命名和默认的:
// consumer.js
import funcB, { funcA } from "./util.js";
funcB();
funcA();
1
2
3
4
5
我们也可以用星号导入整个模块:
import * as myModule from './util.js';
myModule.funcA();
myModule.default();
1
2
3
4
注意,这里要使用默认到处的方法是使用 default() 而不是 funcB()。
从远程模块导入:
import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";
const store = createStore(/* do stuff */)
1
2
3
浏览器中的 ES 模块
现代浏览器支持ES模块,但有一些警告。 要使用模块,需要在 script 标签上添加属性 type, 对应值 为 module。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECMAScript modules in the browser</title>
</head>
<body>
<p id="el">The result is: </p>
</body>
<script type="module">
import { appendResult } from "./myModule.js";
const el = document.getElementById("el");
appendResult(el);
</script>
</html>