开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-项目中整合熔断器（2）前端技术-bable 转码器】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11320
前端技术-bable 转码器
内容介绍
一、bable 简介
二、安装命令行转码工具
三、bable 的使用
一、bable 简介
1.bable 是什么
bable 是转码器，将 es6代码转换成 es5代码，因为写的都是 es6代码，但是 es6代码浏览器兼容性不好，也就是用低版本的浏览器识别不出代码，es5代码浏览器兼容性很好。所以在开发中，编写 es6代码再将代码转换成es5运行
二、安装命令行转码工具
Babel 提供 babel-cli 工具，用于命令行转码。它的安装命令如下:
npm install --global babel-cli
#查看是否安装成功
babel--verslon
新建文件夹名为 babledemo,文件夹在终端中打开先做项目初始化，初始化后使用npm install --global babel-cli 命令后回车即可安装
检查是否安装成功
e:\work\vs1010\babeldemo>babel --version
6.26.0 (babel-core 6.26.31）
e:\work\vs1010\babeldemo>
回车出现版本号，证明已经安装成功
三、bable 的使用
1.初始化项目
npm init-y
2.创建 js 文件
src/example
编写一段 ES6 代码:
//转码前
//定义数据
let input=[1，2，3]
//将数组的每个元素+1
input = input.map(item =＞item + 1)
console.log(input)
如何判断为 ES6 代码？=＞箭头函数为 ES6 标志性代码
3.创建 bable 配置文件
Babel 的配置文件是.babelrc ,存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。
{
"presets":[],
"plugins":[]
}
presets 字段设定转码规则,将 es2015规则加入.babelrc:
{
"presets":["es2015"]，
"plugins":[]
}
4.安装转码器
在项目中安装
npm install --save-dev babe -preset -es2015
wrote to e:\work\vs1010\babeldemo\package.json:
e:\work\vs1010\babeldemo>babel
versian
6.26.0(babel-core6.26.3)
e:\work\vs1010\babeldemo>npm install --save-dev babel-prespet-es2015
npm wARN deprecated babel-preset-es2015@6.24.1:?？？? Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to updatel
Thank you for using core-js
( https://github.com/zloirock/core-js) far polyfilling Javascript standard library！
The project needs your help! Please consider supporting of core-js on Open Collective or Patrean:
+ babel-preset-es2015@6.24.1
added 66 packages from 14 contributors in 16.191s
e:work\vs1010\babeldemo>
下载成功后，文件夹会多出 node_modules
5.使用命令进行转码
(1)根据文件转码
#转码结果写入一个文件
mkdir dist1
#--out-file 或-o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
#或者
babel src/example.js -o dist1/compiled.js
演示
e:\work\vs1010\babeldemo>babel es6/01.js-o dist/001.js
回车
e:\work\vs1010\babeldemo>
没有出现任何提示，表示成功
在001里箭头函数变成了＜item＞｛return item +1
(2)根据文件夹转码
#整个目录转码
mkdir dist2
＃ --out-dir或-d参数指定输出目录
babel src --out-dir dist2
#或者
babel src -d dist2
演示
e:\work\vs1010\babeldemo>babel es6 -d dist
es6\01.js->dist\01.js
