ES6模块化

关于ES6模块化

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在nodeJS中，有模块化的方法，使用CommonJS规范可以做到模块化，也就是说，只有在用js进行后端node开发的时候，才能使用模块化，前端js依然不行

在前端我们可以使用requireJS，seaJS来实现模块化，但是requireJS也是通过对script标签进行异步导入的方式来进行，并不是js里自带的语法

我们也可以使用webpack工具来进行模块化打包，是因为webpack跑在nodeJS中，说到底还是nodeJS中的模块化

但是在ES6中，我们第一次在js语法中加入了模块化的东西，目前很多浏览器都不支持，所以说还需要编译

ES6模块化的规范

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

1. 暴露

可以export直接暴露出某些对象，可以暴露多个：

    //暴露多个接口 在定义的时候暴露
    export let str = 'abcd'
    export  let fn = function(){
        console.log('fn')
    }
    export let person = {
        name:'二狗'
    }

    //暴露多个接口，在{}里放入要暴露的对象
    export {str,fn,person}

因为直接暴露的对象在引入的时候名字不能改变，可能会导致在引入的模块中造成命名冲突
可以在暴露的时候通过as来定义别名

    export {str as a_str,fn as a_fn,person as a_person}

在暴露对象的时候，如果只有一个，可以default暴露，在引入的时候叫啥都行，也不用加{}

    export default fn

default只能暴露一个东西，如果我们有一个是defualt暴露的，还有几个是具名暴露

    export default str
    export {fn,person}

引入：

    import abc,{fn,person} from './modules/module_a'//abc就是上面的str

2. 导入

   如果被引入的模块没有暴露，只是一段逻辑代码需要在引入模块里运行的话

    import './modules/empty'

如果要导入某一个模块中暴露的一些对象的话，注意，不一定非要把其暴露的模块全部引入，导出的对象的名字不能错

    import {str,fn,person} from './modules/module_a.js'
    console.log(str,person)
    fn()

在引入模块中暴露的接口的时候，很可能会产生命名冲突，依赖于在暴露的时候定义别名的话，也不是很安全，所以最好在引入的时候命名别名

    import {str as a_str,fn as a_fn,person as a_person} from './modules/module_a.js'

如果要引入的模块暴露出来的对象有很多，我们在引入的时候可以放入到一个对象中去使用：
A对象不需要自己定义，引入的时候会自动创建

    import * as A from './modules/module_a'
    console.log(A)