[译]JS 模块化历史简介

对于 JavaScript 来说，模块化是一个相对现代的概念，这篇文章会带你在 JavaScript 的世界里快速浏览模块化的历史进程~
Script 标签和闭包在早些年间，JavaScript 就是直接写在 HTML 的

[/code] 标签里的，最多也就是放在独立的文件里面，而它们也都共享一个全局作用域。
任何 JS 文件里面声明的变量都会被附加在全局的 [code]window

复制代码

对象上，并且还有可能意外覆盖掉第三方库中的变量。
随着 web 应用越来越复杂，共享全局作用域这种方式的弊端开始显现，于是 IIFE（立即调用函数表达式）就被发明了出来，并且广为使用。IIFE 就是将一整段代码包裹在一个函数中，然后立即执行这个函数。在 JavaScript 中，每个函数都有一个作用域，所以在函数中声明的变量就只在这个函数中可见。即使有变量提升，变量也不会污染到全局作用域中。
下面让我们看几个 IIFE 的写法，每个 IIFE 的作用域都是独立的，其中第一种写法比较常见：

(function() { console.log('IIFE using parenthesis')})()~function() { console.log('IIFE using a bitwise operator')}()void function() { console.log('IIFE using the void operator')}()

复制代码

使用 IIFE 这种方式，某个库如果想要暴露全局变量，可以在

window

复制代码

上绑定一个对象作为命名空间，这样就避免了污染全局作用域。看下面的代码，假如我们要建立一个

mathlib

复制代码

工具，它有一个

sum

复制代码

方法。假如这个工具有多个模块，也可以建立多个文件，每个文件里都是一个 IIFE，然后向

window.mathlib

复制代码

对象中添加方法就可以了：

(function() { window.mathlib = window.mathlib || {} window.mathlib.sum = sum function sum(...values) { return values.reduce((a, b) => a + b, 0) }})()mathlib.sum(1, 2, 3)// a + b, 0) }})

复制代码

然后我们可以创建一个入口模块

mathlib.js

复制代码

用来集合所有子模块。我们的例子中只有

mathlib/sum

复制代码

一个子模块，但是你可以在

mathlib

复制代码

文件夹中随意扩展。下面我们声明

mathlib

复制代码

模块的依赖，并将依赖作为形参按顺序传入工厂方法，并返回

mathlib

复制代码

模块对象：

define(['mathlib/sum'], function(sum) { return { sum }})

复制代码

好了我们已经定义了一个

mathlib

复制代码

库，下面就可以用

require

复制代码

引入并使用它：

require(['mathlib'], function(mathlib) { mathlib.sum(1, 2, 3) // { // …})

复制代码

在 ESM 中，每个文件同样是一个模块，并且具有自己独立的作用域和执行环境。ESM 相对 CJS 来说有一个重要的优点：即 ESM 是静态加载依赖的。静态加载极大地提高了模块系统的自我检查能力，使得模块系统可以基于抽象语法树（AST）作静态分析，同时 ESM 限制了加载语句必须置于模块顶部，也大大简化了语法解析和语法检查。
在 Node.js v8.5.0 中，ESM 已经可以通过一个 flag 开启。大部分主流的浏览器也都可以支持 ESM。
Webpack 作为 Browserify 的继任者，由于功能强大，基本上坐稳了通用模块打包器老大的位置。像 Babel 支持转换 ES6 那样，Webpack 很早就支持了 ESM 的

import

复制代码

和

export

复制代码

语法以及

import()

复制代码

动态加载函数。并且在 ESM 的基础上，添加了

code-splitting

复制代码

功能，可以将应用程序代码分割成多个文件来提升首屏加载体验。
鉴于 ESM 是原生的模块加载规范，它一统江湖也指日可待了！