Babel 快速入門

NoraXie 發(fā)布于2019-08-22 14:57 / 1220人閱讀

摘要：快速體驗(yàn)安裝依賴新建文件夾，在命令行里進(jìn)入該文件夾，并執(zhí)行如下命令生成文件是內(nèi)置的一個(gè)，可通過命令行操作來編譯文件。入門為了確保轉(zhuǎn)換后的代碼能正常的運(yùn)行，最好在代碼之前引入這是一個(gè)實(shí)現(xiàn)了部分特性的包。參考中文網(wǎng)入門

簡(jiǎn)介

Babel 是一個(gè) JavaScript 編譯器，可將我們代碼中的 ES6 語法轉(zhuǎn)換為 ES5 的語法，使我們的代碼能在不支持 ES6 語法的環(huán)境中正常運(yùn)行。配合一些插件，我們甚至能直接使用 ES6 標(biāo)準(zhǔn)的一些新特性，而無需等待各大瀏覽器的實(shí)現(xiàn)，也無需擔(dān)憂兼容性。

快速體驗(yàn) 1. 安裝依賴

新建 babel_test 文件夾，在命令行里進(jìn)入該文件夾，并執(zhí)行如下命令：

npm init -y # 生成 package.json 文件
npm i -D babel-cli babel-preset-env
npm i -S babel-polyfill

babel-cli 是 Babel 內(nèi)置的一個(gè) CLI，可通過命令行操作來編譯文件。這是一個(gè)可選的開發(fā)依賴包，在實(shí)際開發(fā)中可根據(jù)需求決定是否安裝。

babel-preset-env 會(huì)根據(jù)我們配置的環(huán)境自動(dòng)將該環(huán)境不支持的語法轉(zhuǎn)換 ES5 的語法。

babel-polyfill 是一個(gè)相對(duì)完整的 ES6 環(huán)境，可以為代碼的運(yùn)行環(huán)境補(bǔ)充缺少的 API。這是一個(gè)可選的依賴包，但個(gè)人建議最好安裝并引入到代碼中，詳解見下文。

在編寫本文章時(shí)，上面依賴包的最新版本分別為 babel-cli 6.26.0、babel-preset-env 1.6.1、babel-polyfill 6.26.0，如果安裝的版本不一致，可能會(huì)得到不一樣的結(jié)果。

2. 配置 Babel

新建 .bablerc 文件，內(nèi)容如下：

{
    "presets": ["env"]
}

.bablerc 是 Babel 的默認(rèn)配置文件，運(yùn)行 Babel 時(shí)會(huì)自動(dòng)讀取該文件的配置。上面 .bablerc 文件配置的意思是對(duì)代碼進(jìn)行完全的轉(zhuǎn)換。

3. 編寫代碼

新建 source.js 文件，內(nèi)容如下：

// 這里的代碼無任何意義，只用作示例
const sayHi = () => {
    const str = "Hello World!";
    const arr = [...str];

    alert(arr.join(""));
};

... 是 ES6 語法，詳情可參考 http://es6.ruanyifeng.com/#docs/array

4. 編譯

執(zhí)行以下命令就可以把 source.js 的代碼轉(zhuǎn)換為 ES5 的語法，并把結(jié)果輸出到 target.js 。

./node_modules/babel-cli/bin/babel.js source.js -o target.js

babel-cli 的詳細(xì)命令可參考 https://babeljs.cn/docs/usage/cli/

target.js 的內(nèi)容最終如下：

"use strict";

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

var sayHi = function sayHi() {
    var str = "Hello World!";
    var arr = [].concat(_toConsumableArray(str));

    alert(arr.join(""));
};

可以看到 Babel 在 target.js 添加了 _toConsumableArray 函數(shù)，并將 [...str] 替換成了 [].concat(_toConsumableArray(str)) 。到這里我們已經(jīng)成功的將代碼中的 ES6 語法轉(zhuǎn)換為 ES5 語法，Babel 的使用就是這么簡(jiǎn)單。

babel-polyfill

如果我們仔細(xì)查看上文中的 target.js ，會(huì)發(fā)現(xiàn) Babel 添加的 _toConsumableArray 函數(shù)竟然使用了 ES6 的特性 Array.from ，也就是說我們使用 Babel 轉(zhuǎn)換后代碼里可能還會(huì)存在 ES6 的東西！這個(gè)問題可以參考 https://www.zhihu.com/question/49382420。

這里我們需要重點(diǎn)注意的是：

Babel 默認(rèn)只轉(zhuǎn)換新的 JavaScript 句法（syntax），而不轉(zhuǎn)換新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對(duì)象，以及一些定義在全局對(duì)象上的方法（比如Object.assign）都不會(huì)轉(zhuǎn)碼?！?《ECMAScript 6入門》

為了確保轉(zhuǎn)換后的代碼能正常的運(yùn)行，最好在代碼之前引入 babel-polyfill（這是一個(gè)實(shí)現(xiàn)了部分 ES6 特性的包）。

至此，我們可以放心的隨意使用 ES6 的特性了。

優(yōu)化

其實(shí)現(xiàn)代瀏覽器或多或少都實(shí)現(xiàn)了部分 ES6 標(biāo)準(zhǔn)，如 Chrome v64 甚至已實(shí)現(xiàn)了 97% 的功能。如果我們確定我們的代碼只運(yùn)行在 Chrome v64 ，那么像 source.js 中的箭頭函數(shù)則無需轉(zhuǎn)換，因?yàn)? Chrome v64 已經(jīng)支持這樣的語法了。同理我們也無需引入整個(gè) babel-polyfill ，只需引入其中 Chrome v64 不支持的部分即可。

Babel 的強(qiáng)大之處在這里更能得到體現(xiàn)。當(dāng)我們配置了代碼的運(yùn)行環(huán)境之后，Babel 會(huì)自動(dòng)判斷該環(huán)境對(duì) ES6 的實(shí)現(xiàn)程度，然后只把源代碼中該環(huán)境不支持的語法進(jìn)行轉(zhuǎn)換。如果我們?cè)谠创a中利用模塊化的方式引入 babel-polyfill ，Babel 也會(huì)對(duì)其進(jìn)行優(yōu)化，只引入該環(huán)境尚未實(shí)現(xiàn)的模塊。下面就讓我們來體現(xiàn)一下這強(qiáng)大的功能。

修改配置文件 .babelrc ，內(nèi)容如下：

{
    "presets": [
        [
            "env",
            {
                "targets": { // 配置代碼的運(yùn)行環(huán)境
                    "chrome": 64
                },
                "useBuiltIns": true // 開啟對(duì) babel-polyfill 的優(yōu)化
            }
        ]
    ]
}

修改source.js，內(nèi)容如下：

// 使用 ES6 的模塊化標(biāo)準(zhǔn)引入 babel-polyfill
import "babel-polyfill";

const sayHi = () => {
    const str = "Hello World!";
    const arr = [...str];

    alert(arr.join(""));
};

運(yùn)行命令編譯成功后，target.js 的內(nèi)容如下：

"use strict";

require("core-js/modules/web.timers");

require("core-js/modules/web.immediate");

require("core-js/modules/web.dom.iterable");

const sayHi = () => {
    const str = "Hello World!";
    const arr = [...str];

    alert(arr.join(""));
};

可以看到，箭頭函數(shù)和 ...str 都沒有變化，因?yàn)?Chrome v64 已經(jīng)支持這樣的語法。import "babel-polyfill" 則變成了用 CommonJS 的方式引入了三個(gè)小模塊，這是 Babel 通過查詢 compat-table 得知 Chrome v64 尚未實(shí)現(xiàn)的特性后添加的模塊。

以上便是 Babel 的一些基本使用了。

最后說明一下：

模塊化并不是 Babel 的工作，Babel 僅負(fù)責(zé)轉(zhuǎn)換語法。Babel 輸出的 target.js 使用了 CommonJS 的模塊化規(guī)范，這還需要一些構(gòu)建工具對(duì)其進(jìn)一步編譯才能在 Chrome v64 上運(yùn)行。

core-js 是真正實(shí)現(xiàn)了 ES6 特性的包，是 babel-polyfill 的依賴，babel-polyfill 對(duì)其進(jìn)行了一些包裝。

參考

Babel中文網(wǎng)

ECMAScript 6 入門

compat-table

browserslist

core-js

云服務(wù)器 GPU云服務(wù)器前端快速入門云計(jì)算快速入門 css快速入門 html快速入門

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93027.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

NoraXie

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

博鰲云：馬來西亞vps服務(wù)器,1核1G10M帶寬,cn2+bgp線路,僅100元/月起

閱讀 1529·2021-09-10 11:27
CSS半透明效果的屬性和場(chǎng)景

閱讀 2556·2019-08-30 15:53
基于狀態(tài)機(jī)模型的斗地主游戲（NodeJs&SocketIO）

閱讀 1438·2019-08-30 13:10
過渡和動(dòng)畫

閱讀 3045·2019-08-30 11:09
input實(shí)現(xiàn)文字超出省略號(hào)功能

閱讀 1198·2019-08-29 17:23
偶然發(fā)現(xiàn)了另一種跨域方式，不知道有沒有人這么玩過

閱讀 726·2019-08-29 17:05
css基礎(chǔ)多欄布局

閱讀 3006·2019-08-29 15:10
css系列之line-height 與 vertical-align

閱讀 2409·2019-08-29 13:22

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Babel 快速入門

相關(guān)文章