ES6 模块化

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6 的模块化分为导出（export） 与导入（import）两个模块。

模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

模块化的导入与导出,模块之间就可以通信了

一、模块化

导出模块化

1.列表导出

export {a,b}

2.重命名导出

export {firstName as first,lastName as last};

3.单个属性导出
export let a=1;
export function get(){
	console.log('modules3导出')
};

 4.默认导出   一个模块只能有一个默认导出
export default {
	firstName,
	lastName,
	b:'默认导出'
}

或者
 export default function(){
	console.log('默认导出');
 }

导入模块化

1.列表导入
import {firstName,lastName} from './3-modules';
2 重命名导入
import {first as f,last as l,a,get} from './3-modules';
3 导入有export导出和默认导出的对象变量属性
import * as obj from './3-modules';
console.log(obj,'模块化导入');
console.log(firstName,lastName,f,l,a,get,'modules3打印');
get();
4 默认导入 
import 变量名 from '导入文件';
console.log(变量名,'默认导入');
person();

commonJS 和  ES6 区别

commonJS 使用
导出模块
module.exports ={

}；
导入模块
let {导入数据} =require('所在的文件夹')

ES6

ES6
导出
let get='1';
let set='2';
export {get,set};

导入
import {传入数据} from '所在文件';
console.log(get,set);

CommonJS  是node自带的模块化工具，使用可以直接node  地址

但是ES6 的不能直接使用，要先进行转码，再运行

babel src --out-dir dist （转码 ，将src 下的es6内容转到dist文件下）

node dist/运行文件（运行代码）

并且：

1、CommonJS 模块输出的是一个值的拷贝/复制，ES6 模块输出的是值的引用。
2、CommonJS 模块是运行时加载，ES6 模块是编译时输出接口.