1.ES6介绍
ES6是ES2015、ES2016、ES2017他们的统称
官方名字:《ECMAScript 2015 标准》=> ES6
2.包管理机制(npm)
npm init -y 初始化nodejs项目
生成一个package.json文,该文件中保存了项目所有相关信息
全局依赖
cnpm install xxx --global
简写: cnpm i xxx -g
局部依赖
产品依赖
cnpm install xxx --save
简写:cnpm i xxx -S
开发依赖
cnpm install xxx --save-dev
简写:cnpm i xxx -D
3.Bable安装与使用
babel-cli安装
cnpm i babel-cli -g
预设(转码的标准)babel-preset-latest
cnpm i babel-preset-latest -D
使用:
1)在项目的根目录新建文件.babelrc文件
{
"presets": "latest"
}
2)转码命令
·转码并输出到控制台
babel ./1-es6.js
·转码并输出到新的文件
babel ./1-es6.js --out-filt 1-es5.js 简写:babel ./1-es6.js -o 1-es5.js
·转码并输出整个文件夹
babel src --out-dir dist 简写: babel src -d dist
4.模块化机制
1)CommonJS模块化规范
导入
let { firstName, lastName } = require('./1-module.js')
等同于
let obj = require('./1-module.js')
let first = obj.firstName;
let last = obj.lastName;
对象解构(模式匹配)
let data = {
username: '张三',
age: 12
}
let { username, age } = data
导出
let name = 'zhangsan'
let num = 1
module.exports = {
name,
num
}
2)AMD模块化规范
AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。
它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,
都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
3)ES6模块化规范
导入
import { firstName, lastName, a, post } from './module1.js';
import { firstName as first, lastName as last } from './module1.js';
导入默认
import data from './module1.js'
导入全部
import * as data from './module1.js';
导入执行(模块加载)
import './module1.js';
导入第三方模块(去项目的根目录找node_modules)
import 'babel-preset-latest';
导出
export { firstName, lastName };
export { firstName as fist, lastName as last };
export let a = 1;
export function post() { }
默认导出(一个模块有且只能有1个默认导出,默认导出与普通导出可以共存)
export default {
}
4)CommonJS与ES6模块化规范区别
CommonJS
var a = {age:12}; a.age = 13
b = a;
· 对于基本数据类型,属于复制。即会被模块缓存。同时,在另一个模块可以对该模块输出的变量重新赋值。
· 对于复杂数据类型,属于浅拷贝。由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块。
· 当使用require命令加载某个模块时,就会运行整个模块的代码。
· 当使用require命令加载同一个模块时,不会再执行该模块,而是取到缓存之中的值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结果,除非手动清除系统缓存。
· 运行时加载
ES6
· ES6模块中的导入导出值属于【动态只读引用】。
· 对于只读来说,即不允许修改引入变量的值,import的变量是只读的,不论是基本数据类型还是复杂数据类型。当模块遇到import命令时,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。
· 对于动态来说,原始值发生变化,import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
· 编译时输出接口。