require.js/seajs/ES6/browserify/webpack的区别

Javascript不具有原生的模块化技能，所以须要采用第三方开发的模块依赖处理库来实现模块化：AMD、CommonJS、ES6

这三种方案的实现对比：

• AMD: define + require

• CMD: exports + require

• ES6: export + import

因为ES6自己是原生语言支持实现的模块化，可是现代浏览器大多都还未支持，所以必须使用相应的transpiler工具转换成ES5的AMD,CMD模块，再借助于systemjs/requirejs等模块加载工具才能使用。其中ES6的transpiler（代码转换器）通常是用babel，他的做用是将ES6转化为浏览器支持的ES5写法。

---

js语言自己并不支持模块化，同时浏览器中js和服务端nodejs中的js运行环境是不一样的，如何实现浏览器中js模块化主流有两种方案：

• requirejs/seajs: 是一种在线“编译”模块的方案，至关于在页面上加载一个CommonJS/AMD模块格式解释器。这样浏览器就认识了define, exports,module这些东西，也就实现了模块化。

• browserify/webpack：是一个预编译模块打包的方案，相比于第一种方案，这个方案更加智能。因为是预编译的，不须要在浏览器中加载解释器。你在本地直接写JS，无论是AMD/CMD/ES6风格的模块化，它都能认识，而且编译成浏览器认识的JS。

browerify打包器自己只支持Commonjs模块，若是要打包AMD模块，则须要另外的plugin来实现AMD到CMD的转换。 ​

---

下面是sea.js做者玉伯解释的sea.js和require.js的区别：

• AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。

• CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。

相似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程当中对模块定义的规范化产出。

这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。 目前这些规范的实现都能达成浏览器端模块化开发的目的。

区别：

1. 对于依赖的模块，AMD 是提早执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改为能够延迟执行（根据写法不一样，处理方式不一样）。CMD 推崇 as lazy as possible.

2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：

// CMD
define(function(require, exports, module) {

   var a = require('./a')

   a.doSomething()

   // 此处略去 100 行

   var b = require('./b') // 依赖能够就近书写

   b.doSomething()

   // ... 

})
复制代码

// AMD 默认推荐的是

define(['./a', './b'], function(a, b) {  // 依赖必须一开始就写好

    a.doSomething()

    // 此处略去 100 行

    b.doSomething()

    ...

}) 
复制代码

虽然 AMD 也支持 CMD 的写法，同时还支持将 require 做为依赖项传递，但 RequireJS 的做者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。

3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。好比 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每一个 API 都简单纯粹。

---

• ES6的模块化是自带的，同时也和AMD和CMD同样，支持模块内容选择性引入

//module_a.js

export function add(...args) {
  return arg.reduce ((a, b) => a + b)
}

export function subtract(a, b) {
  return a - b
}

//main.js

import {add} as math from 'module_a'
~~~
复制代码