[前端小小白的學習之路]--Bable實現由ES6轉譯為ES5

Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉譯為ES5代碼，從而在現有環境下執行。

舉例說明：

轉譯前（ES6格式）代碼如下：

let User = {
name : '張三',
age : 22
};

let { name, age } = User;
console.log( name, age );

轉譯後（ES5格式）代碼如下：

'use strict';

var User = {
    name: '張三',
    age: 22
};

var name = User.name,
    age = User.age;

console.log(name, age);

如上用Babel轉譯為ES5格式後就可以在現有的javascript環境下運行了。　

babel安裝與項目部署步驟如下：

1.新建一個babel_test文件夾，併在此文件夾裡面新建src和dist兩個文件夾。

2.在babel_test目錄下初始化項目，生成 package.json文件。

npm init -y

3.安裝bable（全局安裝&本地安裝）　

　全局安裝

npm install -g babel-cli

　本地安裝

npm install --save-dev babel-preset-es2015 babel-cli（建議安裝在當前目錄下）

4.在babel_test目錄下新建 .babelrc文件，該文件用來設置轉碼規則和插件，基本格式如下。(Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel必須要配置這個文件。)

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

5.在src文件夾下麵新建代碼格式為ES6的文件1.js。（文件代碼如本文前面ES6格式的代碼）　　

6.在cmd項目目錄下運行 babel src/1.js -o dist/2.js ，babel會將ES6代碼自動轉譯併在dist文件下生成ES5格式的代碼文件2.js。（文件代碼如本文前面ES5格式的代碼）

7.編譯成功，直接引用1.js就可以在現有環境下執行了。