【ES6】ES6的重要的13种新特性之模块化

1.引入模块

①引入默认模块

使用CommonJS标准来引入模块化：为每一个模块设置一个命名空间，即这个模块的容器。

import http from 'http'

②引入模块部分接口

import {isEmpty} from 'lodash'

另外可以从模块中局部引用的结构定义一个别名，以避免指代不明或接口重名的情况出现。

import {createServer as createHTTPServer} from 'http'

③引入全部局部接口到指定命名空间

有的模块并不会定义默认接口，而只是定义了若干个命名接口

import * as lib from 'module'

③混合引入默认接口和命名接口

import {default as Client,utils} from 'module'

引入的默认接口必须要使用as语句被赋予一个别名，不然default作为保留关键字无法使用。

简介方法：

import Client,{utils} from 'module'
import Client,* as lib from 'module'

④不引入接口仅运行模块代码

import 'system-apple'

2.定义模块

ES Module没有模块定义的概念。

ES Module中以文件名及其相对或绝对路径作为该模块被引用时的标识。

3.暴露模块

①暴露单一模块

export语句后所跟着的语句需要具有声明部分（提供所暴露接口的标识）和赋值部分（提供接口的值）。

export const apiRoot = 'https://example.com/api'

export function method(){
  //...
}

export class Foo{
  //...
}
import {method,Foo} from 'module.js'

②暴露模块默认接口

有时候一个模块只需要暴露一个接口，比如需要让一个工具类直接成为这个模块。

export default class Client {
  //...
}
import Client from 'client.js'

③混合使用暴露接口语句

export语句和export default语句可以同时使用。

export default class Client{
  //...
}

export const foo = 'bar'

import Client,{foo} from 'module'

④从其他模块暴露接口

ES Module提供通过其他模块所暴露的接口作为当前模块接口的方法。

⑤暴露一个模块的所有接口

将import语句和export组合，直接将一个模块的接口暴露到另一个模块上，减少啰嗦代码的产生。

export function foo() {/*...*/}
export * from 'module-1'
import {foo} from 'module'

⑥暴露一个模块的部分接口

export {member} from 'module'

export {default as ModulelDefault} from 'module'

⑦暴露一个模块的默认接口

可以将一个模块的默认接口作为另一个模块的默认接口。

export {default} from 'module'