ES6中Module语法与加载实现

欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

1 前言

在前三篇文章中一次介绍了CommonJS，AMD，CMD，他们都需要单独载入文件

在阮一峰老师的module一文中写到，ES6 在语言标准的层面上，实现的模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

2 引入ES6模块的好处

• 静态加载是提高效率
• 不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点
• 将来浏览器的新 API 就能用模块格式提供，不再必须做成全局变量或者navigator对象的属性
• 不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供

2.1 静态加载带来的好处

commonJS

require实际上是整体加载fs模块，然后在需要使用的时候使用

// CommonJS模块
let {
    stat, exists, readFile } = require('fs')

// 等同于
let _fs = require('fs')
let stat = _fs.stat
let exists = _fs.exists
let readfile = _fs.readfile

ES6

ES6中的import可以在编译时，按照需要去加载所需要的模块，这个时候就相当于只加载了大括号里的3个方法，相比上面CommonJS中使用require加载整个fs模块好很多

import {
    stat, exists, readFile } from 'fs'

3 ES6中Module语法

模块功能主要由两个命令构成：export和import

3.1 export命令

规定对外接口

输出变量：

// poeple.js
export var name = 'zhangsan'
export var height = 180