一:babel简介

1.Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。所以我们不用担心写的es6语法无法在浏览器使用

2.产生效果如下所示

                                            
//转换前
let numbers = [1,2,3];
let babelTest = numbers.map((number)=>number*2);
console.log(babelTest);

//转换后
"use strict";
var numbers = [1, 2, 3];
var babelTest = numbers.map(function (number) {
  return number * 2;
});
console.log(babelTest);
                                            
                                        

二:babel使用方法

在这里假设你的电脑已经配置安装了node、npm、cnpm等环境；我们直接开始演示babel的用法。

1.初始化项目;新建一个项目文件夹，在此文件下打开命令行工具，输入npm init;这里使用vs code，直接右击文件夹，选择在终端打开即可,很是方便，生成如下文件package.json

                                            
{
  "name": "babeldemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
                                            
                                        

2.安装babel;在项目文件夹中执行

                                            
npm install --save-dev  babel-cli;  //加上--save-dev 可将包添加到依赖，
                                            
                                        

3.这一步最重要，需要新建一个.babelrc文件,定义转码的规则

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

4. 安装ES2015转码规则,安装完成之后在上面的.babelrc的"presets": []中加上该规则

                                            
# ES2015转码规则
cnpm install --save-dev babel-preset-es2015
{
    "presets": [“es2015”], 
    "plugins": []  
  }
                                            
                                        

5. 执行转换命令,完成转换

                                            
babel index.js -o compiled.js
                                            
                                        

6. 也可以对整个目录进行转码，将目录下的文件全部转码到另一个文件夹

                                            
babel src -d lib
                                            
                                        

应该也注意到了，如果每次输入命令，比较繁琐，这里将我们的命令加入到package.json

                                            
{
  "name": "babeldemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib" 
  },
  "author": "",
  "license": "ISC"
                                            
                                        

运行 npm run build即可