Babel轉碼快速入門

2021-09-14 00:42:55 字數 1907 閱讀 9205

閱讀基礎：能在node環境下使用npm/yarn
babel 可以將 es6 **轉為 es5 **，從而可以在不支援 es6 的環境執行，下面是乙個例子：

//轉碼前


a=>a+1;


//轉碼後


(function (a) );


//上面的**使用了箭頭函式，babel 將其轉為普通函式。
babel 雖然支援瀏覽器環境，但網頁實時將 es6 **轉為 es5 **會對網頁效能有影響，所以我們需要使用構建工具在生產環境將 es6 **進行提前轉碼。

babel 只能轉換語法（如箭頭函式），不支援新的全域性變數，比如：iterator、generator、set、maps、proxy、reflect、symbol、promise等。

如果想讓這些方法執行，必須使用 babel-polyfill ,為當前環境提供該方法。

babel、babel-polyfill 安裝：

$ yarn add babel-preset-env --dev


$ yarn add babel-polyfill --dev
安裝完成後，我們可以通過.babelrc檔案或者package.json檔案對 babel 進行配置；配置檔案可以根據具體的需求進行配置：英文文件

中文文件。

]]


}
]]


}}
babel 提供 babel-cli 工具，可用於命令列轉碼，工具安裝：

$ yarn add babel-cli --dev
babel-cli 基本用法：

# 輸出轉碼結果


$ babel index.js


# 單檔案轉碼


# --out-file 或 -o 引數指定輸出檔案


$ babel index.js --out-file compiled.js


$ babel index.js -o compiled.js


# 整個目錄轉碼


# --out-dir 或 -d 引數指定輸出目錄


$ babel src --out-dir build


$ babel src -d build


# -s 引數生成source map檔案


$ babel src -d build -s
我們可以在 package.json 檔案中增加指令碼：

,


}
轉碼的時候，就執行下面的命令。

$ yarn run build
babel-cli 工具自帶乙個 babel-node 命令，提供乙個支援 es6 的 repl 環境，而且可以直接執行 es6 **。

執行 babel-node 就可以進入repl環境：

$ babel-node


> (x => x * 2)(1)


2
babel-node 命令可以直接執行 es6 指令碼。將上面的**放入指令碼檔案 es6.js，然後直接執行。

$ babel-node es6.js


2
我們可以改寫 package.json：



}
用 babel-node 代替 node, test.js 就不需要做任何轉碼處理了。

es6 Babel 轉碼器對修飾器的支援

目前，babel 轉碼器已經支援 decorator。首先，安裝babel core和babel plugin transform decorators。由於後者包括在babel preset stage 0之中，所以改為安裝babel preset stage 0亦可。npm install ba...

babel入門系列之babel cli命令列

安裝 babel cli 7.7.7 babel core 7.7.7 1.d,out dir out 指定輸入目錄，編譯輸出到指定目錄 npx babel src d lib 2.source maps true,false,inline,both 增加source map檔案 npx babel...

babel轉碼器 es6新語法轉es5語法

babel轉碼器是不知道某個技術大牛研究出來的，供我們這些技術小白使用的，將es6,es7新語法轉換為es5供其他開發平台解析 在使用 babel 之前 我們先檢測一下當前 node 對 es6 的支援情況。在命令列下執行以下命令安裝 es checker npm install g es chec...