ES6—模块化

ES6是ES2015，ES2016，ES2017的统称，官方名为ECMAScript 2015 标准

babel转换器

babel是一个广泛使用的es6转换器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。

1. 安装：cnpm install --global babel-cli
2. 安装预设
   cnpm install --save-dev babel-preset-latest
3. 新建.babelrc文件并配置{ "presets":["latest"] }
4. 使用：
   转码结果输出到标准输出：babel example.js
   转码结果输出到指定文件：babel example.js -o compiled.js
   整个目录转码到指定目录：babel 文件夹 -d 指定文件夹

//转码前
let a='hello world';
let add=()=>{
    console.log(a);
}
//转码后
var a = 'hello world';
var add = function add() {
  console.log(a);
};

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来
好处：
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.exports

//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;

ES6模块和CommonJs模块的差异

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用

2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

3. CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段