Babel是一個廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)譯為ES5代碼，從而在現(xiàn)有環(huán)境下執(zhí)行。

舉例說明：

轉(zhuǎn)譯前（ES6格式）代碼如下：

let User = { name : '張三', age : 22 };let { name, age } = User; console.log( name, age );

　　　　　　

轉(zhuǎn)譯后（ES5格式）代碼如下：

'use strict';var User = {name: '張三',age: 22 };var name = User.name,age = User.age;console.log(name, age);

　　

如上用Babel轉(zhuǎn)譯為ES5格式后就可以在現(xiàn)有的javascript環(huán)境下運行了。　

?

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（建議安裝在當(dāng)前目錄下）

?

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

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

?　　

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

?

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

?

7.編譯成功，直接引用1.js就可以在現(xiàn)有環(huán)境下執(zhí)行了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/luxiaoxing/p/7308700.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Bable实现由ES6转译为ES5的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。