Babel 轉(zhuǎn)碼器

Babel?是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。下面是一個(gè)例子。

// 轉(zhuǎn)碼前 input.map(item => item + 1); // 轉(zhuǎn)碼后 input.map(function (item) { return item + 1; });

上面的原始代碼用了箭頭函數(shù)，Babel 將其轉(zhuǎn)為普通函數(shù)，就能在不支持箭頭函數(shù)的 JavaScript 環(huán)境執(zhí)行了。

配置文件.babelrc

Babel 的配置文件是.babelrc，存放在項(xiàng)目的根目錄下。使用 Babel 的第一步，就是配置這個(gè)文件。

該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件，基本格式如下。

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

presets字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。

# 最新轉(zhuǎn)碼規(guī)則 $ npm install --save-dev babel-preset-latest # react 轉(zhuǎn)碼規(guī)則 $ npm install --save-dev babel-preset-react # 不同階段語法提案的轉(zhuǎn)碼規(guī)則（共有4個(gè)階段），選裝一個(gè) $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3

然后，將這些規(guī)則加入.babelrc。

{"presets": [ "latest", "react", "stage-2" ], "plugins": [] }

注意，以下所有 Babel工具和模塊的使用，都必須先寫好.babelrc。

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

超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的Babel概述及使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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