es6模块化

一.ES6介绍
ES6是ES2015、ES2016、ES2017他们的统称
官方名字：《ECMAScript 2015 标准》=> ES6
二.包管理机制（npm）
初始化nodejs项目 npm init -y
生成一个package.json文件，该文件中保存了项目所有相关信息
1.全局依赖
cnpm install babel-cli --global
简写: cnpm i babel-cli -g
2.局部依赖
2.1产品依赖 dependencies
cnpm install babel-cli --save
简写：cnpm i babel-cli -S
2.2开发依赖/环境依赖 devDependencies
cnpm install babel-cli --save-dev
简写：cnpm i babel-cli -D
三.Bable安装与使用
babel是一个广泛使用的es6转换器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行
1. babel-cli安装
cnpm install babel-cli --global
简写：cnpm i babel-cli -g
2. 安装预设（转码的标准）babel-preset-latest
cnpm install --save-dev babel-preset-latest
简写：cnpm i babel-preset-latest -D

3. 使用：
   1）在项目的根目录新建文件.babelrc文件
   ｛
   “presets”: “latest”
   ｝
   2)转码命令
   ·转码并输出到控制台
   babel xxx.js
   ·转码并输出到新的文件
   babel xxx.js --out-filt xxx1.js 简写：babel xxx.js -o xxx1.js
   ·转码并输出整个文件夹
   babel 文件夹 --out-dir 文件夹 简写：babel 文件夹 -d 文件夹
   四、模块化机制
   模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来
   好处：
   1）防止命名冲突；
   2）代码复用；
   3）高维护性

常用模块化规范：CommonJs、AMD、CMD、ES6
服务器：CommonJs(Node.js)
浏览器：AMD(require.js)、CMD(sea.js)
浏览器端与服务器端通用：ES6
注意：从 v13.2 版本开始，Node.js 已经默认打开了 ES6 模块支持。在v12的版本里面，需要在package.json中设置{“type”: "module”}

ES6模块化

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入
导出export
1.单个导出

//hello.js
export let a = 1;
export let name = 'Terry';
export function add(a,b){
	return a+b;
}

2.按需导出

let name = 'Terry';
function add(a,b){
	return a+b;
}
export {name,add}

3.默认导出
一个模块只能有一个默认导出,不能使用 var、let 或 const 用于导出默认值 export default

//default.js
export default{
	name:'Terry',
	age:20,
	sayHello:function(){
		console.log("hello,world");
	}
}
//var a = 1;
//export a;
//报错，因为没有提供对外的接口，应该使用export var a = 1; 或export {a}

重命名导出

let firstName = 'Terry';
export {firstName as name};

导入import
导入时也可以使用as重命名
1.统一全部导入

import * as newName from './hello.js'

2.按需导入

import {name,add} from './hello.js'

3.导入export default导出的模块

import obj from "./default.js"

CommonJs模块化

CommonJS 模块就是对象，输入时必须查找对象属性

//对象解构(模式匹配)
let data={
	name:'zs',
	age:12
}
let {name,age}=data;//name为zs，age为12

导出module

//module.js
module.exports={
	firstName:'zhang',
	lastName:'san'
}

导入require

let {firstName,lastName} = require('./module.js')
//等同于
let obj = require('./module.js')
let first = obj.firstName;
let last = obj.lastName;

AMD模块化规范

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

CommonJS与ES6模块化规范区别

CommonJS

· 对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。
· 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
· 当使用require命令加载某个模块时，就会运行整个模块的代码。
· 当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
· 运行时加载

ES6

· ES6模块中的导入导出值属于【动态只读引用】。
· 对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
· 对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
· 编译时输出接口。