暖夏少年|这些 ECMAScript 模块知识，都是我需要知道的
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.jsexport function funcA() {return "Hello named export!";}export default function funcB() {return "Hello default export!";}这里有两个导出 。
第一个是命名导出 ， 后面是export default ， 表示为默认导出 。
假设我们的项目文件夹中有一个名为utils.js的文件 ， 我们可以将这个模块提供的对象导入到另一个文件中 。
如何从 ES模块 导入假设我们在项目文中还有一个Consumer.js的文件 。 要导入utils.js公开的函数 ， 我们可以这样做：
// consumer.jsimport { funcA } from "./util.js";这种对应我们的命名导入方式.
如果我们要导入 utils.js 中的默认导出也就是 funcB 方法 ， 我们可以这样做：
【暖夏少年|这些 ECMAScript 模块知识，都是我需要知道的】// consumer.jsimport { funcA } from "./util.js";当然 ， 我们可以导入同时导入命名和默认的：
// consumer.jsimport funcB, { funcA } from "./util.js";funcB();funcA();我们也可以用星号导入整个模块：
import * as myModule from './util.js';myModule.funcA();myModule.default();注意 ， 这里要使用默认到处的方法是使用 default() 而不是 funcB() 。
从远程模块导入：
import { createStore } from "@4.0.5/es/redux.mjs";const store = createStore(/* do stuff */)浏览器中的 ES 模块现代浏览器支持ES模块 ， 但有一些警告 。 要使用模块 ， 需要在 script 标签上添加属性 type ，对应值 为 module 。
ECMAScript modules in the browserThe result is:myModule.js 内容如下：
export function appendResult(element) {const result = Math.random();element.innerText += result;}动态导入ES 模块是静态的 ， 这意味着我们不能在运行时更改导入 。 随着2020年推出的动态导入(dynamic imports) ， 我们可以动态加载代码来响应用户交互(webpack早在ECMAScript 2020推出这个特性之前就提供了动态导入) 。
考虑下面的代码：
Dynamic importsLoad!再考虑一个带有两个导出的JavaScript模块
// util.jsexport function funcA() {console.log("Hello named export!");}export default function funcB() {console.log("Hello default export!");}为了动态导入 util.js 模块 ， 我们可以点击按钮在去导入：
推荐阅读
- 游研社|虎牙斗鱼合并，游戏直播赛道还有这些低调玩家
- 公安机关|这些人，速速投案！
- 锦州|寻味辽宁醉经典|“烧鸽子”“炒河蟹”……这些锦州烧烤吃起来别有一番风味！
- 烧烤|这些垃圾食品真的不垃圾，只要你会这样吃...【食安宣传周】火锅、汉堡、烧烤
- 北京青年报|干冷秋冬季 这些“好物”提升幸福感
- 彭坦|他曾是乐队主唱颜值天花板，娶名模12年0绯闻，42岁仍是少年
- 鲜闻联播|二话不说！拔剑指向酒馆老板，笑话：少年只身来到一家酒馆
- 戏说健康|对于许多老师都头疼的公开课, 怎样预备才好? 这些细节不能忽略
- 惩戒|全面“断卡”！已有人被惩戒，这些事做不得！
- 战斗机,军事|这张迟来的“全家福”，14岁少年等了14年！