1. 程式人生 > >[前端小小白的學習之路]--Bable實現由ES6轉譯為ES5

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

all str .json blog ict true save back sta

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

2.安裝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就可以在現有環境下執行了。

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