这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

为什么要用babel？

因为es6的一些高级语法不能直接在浏览器或者node.js中直接执行，所以需要使用babel来编译将其转化为es5的代码，这就意味着可以用es6写代码而不用考虑环境是否支持

babel的安装

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli
//cnpm速度快一些

//查看是否成功
babel --version

Babel的使用

1、创建babel文件夹

2、初始化项目

npm init -y

3、创建文件src/example.js,创建src文件夹的目的是为了把很多源文件放在一个目录下统一编译和转化

//转码前
//定义数据
let input =[1，2，3]
//将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

4、配置Babel

Babel的配置文件是.babelrc,存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{
"presets": [],
"plugins": []
}

presets字段设定转码规则，将es2015规则加入.babelrc：

{
"presets": ["es2015"],
"plugins": []
}

5、安装转码器

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

为什么要安装转码器？ 转码器相当于一张映射表，在Babel将es6的语法糖转化成es5的语法糖过程中，会将原来的es6代码对照映射表一一转化成es5的语法格式

6、转码

#npm install--save-dev csv-loader xml-loader
#转码结果写入一个文件
mkdir dist1
#--out-file 或-o 参数指定输出文件
babel src/example.js--out-file dist1/compiled.js
#或者
babel src/example.js-o dist1/compiled.js
#整个目录转码
mkdir dist2

例：

//es2015
var name ="xuexiangban";
var title ="广东";
var  arr =[1,2,3,4,5,6,7,8,9,10];
var newarr = arr.map(function(a){
return a*2;});
console.log（name）;
console.log（title）;
console.log（newarr）;
//es6
let name ="xuexiangban";
const title ="广东";
let arr =[1,2,3,4,5,6,7,8,9,10];
let newarr = arr.map(a=>a*2);
console.log(name);
console.log(title);