簡介

babel是一個廣泛使用的轉碼器，可以將ES6代碼轉化為ES5代碼，從而在現有環境執行，這意味著，你可以現在就用ES6編寫程序，而不用擔心現有環境是否支持。

安裝及配置

npm install babel-cli --save-dev 或者 cnpm install babel-cli --save-dev使用淘寶鏡像安裝會更快。

步驟：進入項目 ==>cnpm install babel-cli --save-dev

為什么不安裝在全局

如果安裝在全局，那意味著項目要運行，全局環境必須有bable，也就是說項目產生了對環境的依賴。另一方面，這樣做也無法支持不同項目使用不同版本的babel。

設定轉碼規則

根目錄下安裝：cnpm install babel-preset-es2015 --save-dev

安裝完成之后，再創建配置文件 .babelrc這個文件，得放在項目根目錄下，它的基本格式是：

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

presets字段設置的就是轉碼規則，plugins是設置的babel的插件。然后配置文件：

{  "presets":["es2015"]}

到這里，關于babel的基本配置就完成了。

實例演示：

在項目根目錄下創建demo.js

let a = 5;const b = 10;let input = [1,2,3];input.map(item => item+1);

因為我們現在是將babel安裝到了當前目錄下，所以不能直接在終端中babel轉換命令，得使用npm來運行，所以先在packge.json中編寫

{ "devDependencies": {  "babel-cli": "^6.26.0",  "babel-preset-es2015": "^6.24.1" }, "scripts":{   "build":"babel demo.js" }}

進入根目錄，npm run build運行，查看結果

也可以輸出到指定的目錄

{ "devDependencies": {  "babel-cli": "^6.26.0",  "babel-preset-es2015": "^6.24.1" }, "scripts":{   "build":"babel demo.js --out-file bunder.js" }}

進入根目錄，npm run build運行，查看結果

這次會在根目錄下找到被編譯過的bunder.js文件

文件夾截圖

總結

以上所述是小編給大家介紹的babel的使用及安裝配置教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！