模块化

模块化这个概念被完善是在es6出来后，es5也有类似的实现，比如：

es5：

var fn1 = (function(){
    function sayHello() { console.log('hello')}
    return {
        sayHello
    }
})();

// 自执行函数相当于一个模块，return相当于export暴露，整个模块挂载在fn1上。

es6:

// fn1.js
function sayHello() { console.log('hello')}
export {
    sayHello
}

// 1.html
<script type="module">
  import { sayHello } from './fn1.js'
  sayHello()
</script>

或者

function sayHello() { console.log('hello')}
export default {
    sayHello
}

// 1.html
<script type="module">
  import fn1 from './fn1.js'
  fn1.sayHello()
</script>

模块化的几种格式：amd，commonjs，umd，system.register、esm，

目前常见的模块化格式就是以上几种，如果分为大类，其实就是amd和其他和esm。

amd支持浏览器，使用requirejs加载器引入。其他支持node环境（umd两者都支持），使用systemjs加载器引入。

目前可以使用webpack、rollup、browserify等打包工具可打包成以上类型。

其中如何区分模块化的js是哪种类型？有define的是amd可在浏览器环境，有module.exports是nodejs环境允许。有import和export/export default的是esm。

模块格式

amd

运行于浏览器环境，使用define函数定义：

define(['mod1', 'mod2'], function(mod1, mod2) {
    return function() {}
})

umd

支持浏览器和nodejs环境：

(function(root, factory){
    if (typeof define === 'function' && define.amd) {
        // amd
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // umd
        module.exports = factory(require('b'));
    } else {
        root.return Exports = factory(root.b)
    }
})(this, function(b) {
    return {}
})

esm

export function sayHi() {}
export default sayHello() {}