ES6常用语法糖(附Babel配置使用方法)

获取数据: 解构赋值

解构赋值

填充数据: 模板语法 (多行字符串)

模板语法

规范数据域 :let/const, 块级作用域

let只在块级作用域内有效

let不允许重复声明

let声明的变量不可重复赋值

设置默认数据: 设置函数默认参数值

设置默认参数值

规范数据流向: 优雅的箭头函数(填坑this指向Window问题)

---

ES6语法兼容低版本浏览器(将ES6语法装换到ES5语法):

转换示意图

使用Babel:

Babel

Babel相当于一个翻译, 可以将ES6的语法,装换为ES5的语法

Babel的安装

为了方便安装以及后续的管理, 我们使用npm管理工具, 安装babel

• 新建一个目录, babel-test

• npm init, 一路回车, 会在babel-text生成配置文件package.json

• 安装Babel相关的包

安装es2015转码规则

npm install --save-dev babel-preset-es2015
`

安装react转码规则

npm install --save-dev babel-preset-react

安装es7提案转码规则

npm install --save-dev babel-preset-stage-3

Babel的配置

在babel-test下新建配置文件.babelrc, 将刚刚安装的三个规则配置到.babelrc, 保存文件

{
    "presets": [
        "es2015", 
        "react", 
        "stage-3"
        ],
    "plugins":[]
}

Babel的使用

• 为了便于项目管理,我们把babel的工具babel-cli之间安装到babel-test内

npm install --save-dev babel-cli

• 在package.json 中配置运行命令build(命令作用为: 把根目录下的js文件夹内所有es6语法的js文件, 在保持原文件名的基础上, 转码输出到lib文件夹)

"build": "babel js -d lib"  

build转码

• 在根目录下新建js文件夹, 并新建两个es6语法的js文件, 使用npm run build转换, 查看结果

转换