ES6模块化简单总结

先介绍一个工具

：

Babel：

babel是一个广泛使用的es6转换器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。
// 转码前
input.map(item => item + 1);
// 转码后
 input.map(function (item) { return item + 1; });

安装
$ npm install --global babel-cli
安装预设并且添加配置文件配置.babelrc
$ npm install --save-dev babel-preset-es2015
{ “presets”: [ "es2015"]}
使用
转码结果输出到标准输出
$ babel example.js
转码结果写入一个文件，--out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
整个目录转码 --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib

ES6模块化:

        Javascript一直没有模块体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型的、复杂的项目形成了巨大障碍。
        在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

import命令

           import{stat,exists,readFile} from 'fs'//ES6模块

           //从fs模块加载3个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载，即es6可以在编译时就完成模块加载，效率比较高。

 

        es6模块不是对象，而是通过export命令显示指定输出的代码，再通过import命令载入。

export命令

        一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系，也就是说外部接口需要用这个接口名来引用。

//module1.js
const firstName = 'zhangsan';
const lastName = 'lisi'
console.log(firstName+'love'+lastName);

//导出
export {firstName,lastName};//列表导出
export{firstName as first,last as last};//重命名导出
export const a =1;//导出单个属性
export function test(){
    console.log('我是module1的方法')
}
//默认导出 #一个模块只能有一个默认导出，不能使用var,const导出默认值export default；
export default{
    username:'zhangsan',
    age:'12'
}

export default function foo(){};
var a = 1;export a//报错，因为没有提供对外的接口，可以为export a = 3;或者export{a}

import * as module from './module.js'	//导入整个模块内容
import {firstName,lastName} from './module1.js'	//导入多个接口
import {firstName as first} from './module1.js'	//重命名
import '/modules/my-module.js';			//运行整个模块而不导入任何值
import myDefault from './my-module.js';		// 导入使用export default导出的模块

CommonJS模块化

        CommonJS 和 AMD 模块，都只能在运行时确定模块之间的依赖关系，以及输入输出的变量。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

// CommonJS模块
let { stat, exists, readfile } = require('fs');
 // 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。

模块化对象

Node内部提供一个Module构建函数。所有模块都是Module的实例。每个模块内部，都有一个module对象，代表当前模块。它有以下属性。
module.id 模块的识别符，通常是带有绝对路径的模块文件名。
module.filename 模块的文件名，带有绝对路径。
module.loaded 返回一个布尔值，表示模块是否已经完成加载。
module.parent 返回一个对象，表示调用该模块的模块。
module.children 返回一个数组，表示该模块要用到的其他模块。
module.exports 表示模块对外输出的值。 

const firstName = 'zhangsan';
const lastName = 'lisi';
module.exports = {
  firstName,
  lastName
}

// 使用CommenJS模块化机制导入module3.js中的变量
let { firstName, lastName } = require('./module3')
console.log(firstName, lastName);
console.log(module.id, module.filename, module.loaded, module.parent, module.children);