1.ES6介绍
ES6是ES2015、ES2016、ES2017他们的统称
官方名字:《ECMAScript 2015 标准》=> ES6
2.Babel安装与使用
安装
cnpm install --global babel-cli
简写:cnpm i -g babel-cli
预设(转码标准)
cnpm install --save-dev babel-preset-latest
简写:cnpm i -D bebel-preset-latest
使用
1)在项目的根目录新建文件.babelrc文件
{
"presets": ["latest"]
}
2)转码命令
1.转码并输出到控制台
babel ./1-es6.js
2.转码并输出到新的文件
babel ./es6.js --out-file es5.js
简写:babel ./es6.js -o es5.js
3.转码整个文件夹并输出到新的文件夹
babel src --out-dir dist
简写:babel src -d dist
3.包管理机制(npm)
1)项目初始化
npm init -y 初始化nodejs项目
项目初始化完毕后,在项目的根目录创建一个package.json文,该文件中保存了项目所有相关信息
依赖安装完毕后,在项目的根目录下创建了node_modules
2)安装依赖
全局依赖
保存在全局的包(依赖),任何地方都能使用
npm install --global xxx
简写:npm i -g xxx
局部依赖
开发依赖 devDependencies
npm install --save-dev xxx
简写:npm i -D xxx
产品依赖 dependencies
npm install --save xxx
简写:npm i -S xxx
卸载依赖
npm uninstall xxx
3)yarn使用
初始化一个新项目
yarn init
添加包
yarn add [package]
--dev
更新包
yarn upgrade [package]
删除
yarn remove [package]
安装项目的全部依赖
yarn
或者yarn install
4.模块化机制
1)CommonJS 模块化规范()
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
2)AMD 模块化规范 客户端的浏览器的
AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。
它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,
都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
3)ES6 模块化规范
export用来从模块中导出
import用来从模块中导入。
导入
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加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
编译时输出接口。
模拟环境
a.js
name,age,gender
b.js
number
只想用name变量
1)
index.html
<script src="./a.js"></script>
<script src="./b.js"></script>
2)模块化机制(按需引入,按需导出