Babel

一、简介

Es6的某些高级语法有时候在浏览器环境和Node.js环境中运行，这时候我们就需要一个解码器将其解码成能运行的代码(其实就是语法降级)，一般的话使用的就是Babel，它是一个广泛使用的解码器，可以将Es6的代码转为Es5，从而不担心客户的运行环境是否支持。

二、安装

1. Babel提供了babel-cli工具，用命令行转码
   安装命令如下

npm install -g babel-cli

2. 通过查看其版本好号判断是否安装成功

babel --version

三、使用

案例示范：

1. 创建一个文件夹，并使用npm init -y初始化，创建文件src/a.js,src/b.js和src/c.js三个文件
   其内容为：

let arr = [1,2,3];
arr = arr.map(item=>item+1);
console.log(arr);

let arr_b = ['a','b','c'];
arr_b = arr_b.map(item=>item+1);
console.log(arr_b);

let arr_c = ['A','B','C'];
arr_c = arr_c.map(item=>item+1);
console.log(arr_c);

2. 配置 .baberlrc
   Babel的配置文件是==.babelrc==,该文件存放在项目的根目录下，作用是来设置转码跪着和插件，基本配置如下

{
	"presets":[],//转码规则
	"plugins":[]//插件
}

我们在项目的根目录下创建一个==.babelrc==文件，内容为

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

3. 安装转码器，一般在项目中安装即可

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

4. 执行转码操作

babel 源码文件夹 参数 转码保存的文件夹

常用参数：

–out-file：用来指定具体输出文件，可以直接简写为 -o
例如：
babel src/a.js --out-file dist/complied.js
或
babel src/a.js -o dist/complied.js甚至babel src -o dist/complied.js
但是
babel src -o dist或者babel src/a.js -o dist都是不允许的

–out-dir：用来指定具体输出文件夹，可以直接简写为 -d
例如：
babel src --out-dir dist
或
babel src -d dist
甚至
babel src/a.js -d dist
但是
babel src -o dist/a.js或者babel src/a.js -o dist/a.js都是不允许的

也就是说源码文件无论是 -o 还是 -d都可以自主选择是整个文件夹还是单个文件，转码的存放就必须对应相同的参数。

四、自定义脚本

1. 改写package.json

{
  "name": "Babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //在此处添加"key":"你的脚本"
    "bulid": "babel src -d dist"//我们添加的脚本
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1"
  }
}

2. 运行下面命令

mkdir dist
npm run build