特性
- 目前大部分浏览器支持在html中script -> type类型为module 就可以以模块化来写代码。并且modules默认为严格模式。
- 每个ES Modules都运行在一个私有作用域里面。
- ESM是通过CORS的方式请求外部JS的模块(跨域请求的方式)
- ESM的script标签会延迟执行脚本（在浏览器中js是同步执行的。当js执行的时候会阻断主进程。加上延迟加载会等页面渲染完成在加载js）
ES modules导出
重命名
- export default 默认导出的成员。
- import name(名字可以自定义) from '*'
导入导出注意事项
- export {q, a} 固定搭配写法
- 引入的时候： import {q, a} from "*"
- 并不是我们es6里面的解构写法。
- export default {q, a}
- 引入的时候 import X form "*"
- 这个X就表示这个对象。可以X.q , X.a 获取对应的值。
- import {q, a} from "*" 对外暴露的成员是一个引用关系。
- import导出的成员只是只读的，不可以被外部修改。
ES Modules 导入用法
- import {q, a} from "./*.js" 原生es modules 没法省略掉扩展名。
- import {q, a} from "./app.js" 引用必须以点开头。不然默认以为加载第三方模块。可以/从根目录开始查找文件。可以使用完整的url
- 加载这个模块并不提取内部的成员。
- 提取该模块下的所有成员，并将模块重新命名成为一个对象。该模块下的所有成员都会作为这个对象的属性出现。
- import * form ‘*’只能出现代码顶层。
- 如果需要根据逻辑动态加载某个模块。我们可以使用import（）这个函数。js加载模块是异步的。并且这个函数执行完返回是的一个Promise.
- 当一个模块中我们不仅导出命名成员，还导出默认成员。
ES Modules Polyfill
Polyfill工作原理： 针对不兼容的模块化的浏览器。Polyfill回自己执行一边代码。如果在兼容模块化的浏览器的话代码回执行两遍。这个时候我们就需要判断当前浏览器支不支持模块化的写法。
<script nomodule>
// 写入不支持模块化代码
</script>
ES Module in node.js
- esm 读取commonjs
- 不能直接提取成员，只能提取default默认对象。 注意： import 不是解构导出对象。
- commonjs 读取 esm 原生node不可以。 webpack中可以 不能在commonJS模块中通过 require 载入 Module
