模块化理解

commonjs 规范

• 一个文件就是一个模块
• 每个模块都有单独的作用域
• 通过 module.exports 导出成员
• 通过 require 函数引入模块

同步模式加载模块，nodejs 使用的规范

AMD 规范

异步模式加载模块

ES module

现在浏览器使用的模块化规范

<script type="module"></script>
// 加一个type类型就是一个模块了
//添加nomodule只有在不支持module的浏览器下才执行
<script nomodule type="module"></script>

• 默认采用严格模式
• 每个模块有单独私有作用域
• esm 的 script 标签会默认延迟执行脚本
• esm 是通过 cors 的方式请求 js 文件

ESM 导出和导入

let name;
//导出
export { name };
//导入
import { name } from "文件路径";

// 导出
export default name;
//导入
import name from "文件路径";

// 导入  只加载文件 不使用方法
import "文件路径";

// 导出所有成员对象
import * as mod from "文件路径";

// d动态导入
import("./module").then(function (module) {
  console.log(module);
});

当我们浏览器不支持ES module模块，我们可以引入polyfille来兼容浏览器