转码神器Babel

一、什么是babel

​ 首先需要了解ES6和ES5的差别：

​ ES6比较简洁，书写起来比较方便，所以实际开发中往往使用ES6进行编程。但是ES6的浏览器兼容性不如ES5，为了能够方便编程，并且使得代码可以支持更多的浏览器。我们常常需要将ES6的代码转换成ES5。此时我们常用的技术就是Babel，它是一个被广泛使用的转码器，可以将ES6代码转为ES5代码。这意味着，现在可以用 ES6 编写程序，而不用担心浏览器环境的问题。

二、安装babel环境

​ 此处介绍通过命令行使用babel，假设你已经安装了npm。

第一步：使用npm初始化项目

#直接初始化项目，采用默认配置
npm init -y

第一步：安装babel-cli工具

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

#全局使用此工具
npm install --global babel-cli

#查看是否安装成功
babel --version

第二步：安装es2015转码器

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

第三步：书写.babelrc配置文件

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

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

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

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

三、使用babel进行转码

第一步：创建src文件夹和dist文件夹

​ 分别用来存放ES6和ES5文件

第二步：在src文件夹下书写 example.js 作为demo

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

第三步：执行转码

​ 有两种转码方式：

​ 1、转换单个js文件

# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js

​ 2、转换整个文件夹

# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

​ 执行之后就会在dist文件夹下生成ES5的js文件，如下：

"use strict";

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