1. 为什么要让 JS 模块化？

• 复用模块 ——> 提高开发效率
• 降低代码间耦合 ——> 提高代码维护效率
• 按需加载模块 ——> 提高页面加载效率
• 模块独立作用域 ——> 避免命名冲突

2.JS 模块化方案对比

在没有标准的模块化方案之前，我们是这样实现 JS 模块化效果的：

var module1 = (function ($, YAHOO) {

　　　　//...

　　})(jQuery, YAHOO);

这虽然解决了模块的 复用、降低耦合、按需加载、独立作用域 问题，但会有 模块加载请求过多、模块间依赖顺序模糊 的问题。

后来随着前端的发展，出现了几种不同的模块化标准方案，而 ESM 则是目前主流的 JS 模块化官方标准方案：

设计方案	实现方案	适用环境	运行机制
CommonJS	NodeJS	服务器	运行时加载、同步加载
AMD	RequireJS	浏览器	提前执行、异步加载
CMD	SeaJS	浏览器	按需执行、异步加载
ESM	ES6	服务器/浏览器	编译时加载、异步加载

3.ESM 方案简述

特点：在代码静态编译阶段，以传引用的方式来确定要加载的模块内容

优点：利于静态代码分析、语法简洁、支持 tree-shaking、原生支持、封装性更好

缺点：需要通过工具将转ESM换成AMD实现，以支持旧版本浏览器

该方案典型用法的代码如下例：

//在 a.js文件中抛出
function foo(){ };
let bar={ };
let a='aaa';
export {foo, bar, a};

//上面代码等价于
export function foo(){ };
export let bar={ };
export let a='aaa';

======================================================================

//在 b.js文件中引入a.js
import {foo, bar, a} from 'a.js';
foo();
bar.x=a;
//......

ESM用法介绍

常用语法介绍：www.runoob.com/w3cnote/es6…
高级语法介绍：es6.ruanyifeng.com/#docs/modul…
语法官方介绍：developer.mozilla.org/zh-CN/docs/…