Babel简单学习

什么是Babel

ES6代码简单，开发中一般都写ES6，但是ES6代码的浏览器兼容性很差，所以可以使用Babel将ES6的代码转换成ES5。

安装Babel

npm install -g babel-cli
babel --version # 查看版本

写一段es6代码

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

配置.babelrc

在项目目录下创建 .babelrc文件，并配置：

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

安装转码器

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

使用命令进行转码

#转码结果写入一个文件
mkdir dist1
babel src/example.js --out-file dist1/compiled.js
或
babel src/example.js -o dist1/compiled.js
.
#整个目录转码
mkdir dist2
babel src --out-dir dist2
或
babel src -d dist2

上面的es6代码转成es5:

"use strict";

//转码前
var input = [1, 2, 3];
//将数组的每个元素+1
input = input.map(function (item) {
  return item + 1;
});
console.log(input);