回答

在了解esm与umd之前我们来看一下两个规范，amd与commonjs

amd（Asynchronous Module Definitions）规范因RequireJS而出名，其适用于浏览器端，commonjs常被用于node中，当然其也可通过Browserify用于浏览器中。

amd

其用法如下：

// 文件名: foo.js
define(['jquery'], function ($) {
// 方法
function myFunc(){};

// 暴露公共方法
return myFunc;
});

定义的第一个部分是一个依赖数组，第二个部分是回调函数，只有当依赖的组件可用时（像RequireJS这样的脚本加载器会负责这一部分，包括找到文件路径）回调函数才被执行。

理想状态下，期望其依赖是异步加载的，通过在中注入script，不阻塞浏览器的加载和渲染，但实际环境下，其表现的没有那么好，因此需要amd 模块为一个单文件模块并与require.js 优化器配合来进行渲染

总结如下：

异步加载

其被提出，主要用于客户端browser

其语法不直观，没有commonjs便于书写

commonjs

如果你用node写过东西的话，你可能会很熟悉commonjs风格，其用法如下：

// 文件名: foo.js
// 依赖
var $ = require('jquery');
// 方法
function myFunc(){};

// 暴露公共方法（一个）
module.exports = myFunc;

总结如下：

语法类似于node，因为node使用commonjs规范

commonjs导入模块是同步导入

主要用于后端，客户端用的话需要通过Browserify

书写直观

umd 是amd和commonjs的统一规范，支持两种规范，即写一套代码，可用于多种场景。其用法如下：

(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS之类的
module.exports = factory(require('jquery'));
} else {
// 浏览器全局变量(root 即 window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
// 方法
function myFunc(){};

// 暴露公共方法
return myFunc;
}));

毋庸置疑的是，其写法也是最复杂的

前后端均通用

与CJS或AMD不同，UMD更像是一种配置多个模块系统的模式。

UMD在使用诸如Rollup/ Webpack之类的bundler时通常用作备用模块

ESM

ESM是ES6提出的标准模块系统，相信大家都用过

import React from 'react';

很多浏览器开始支持

拥有类似commonjs的写法和同、异步加载机制

能通过设置type=module，用于html中