Babel簡介

Babel 是一個工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環(huán)境中。

中文文檔

安裝

npm install -g bable-cli 全局安裝
babel --version 查看版本

Babel的使用

1、首先我們創(chuàng)建一個目錄，使用npm init -y 初始化一個node工程
2、編寫一段程序，基于es6(es2015)語法

let name = "xiuyuandashen"; let title = "es6語法"; let arr=[1,2,3,4,5,6];let newArr = arr.map(a=>a*2); console.log("name= ",name); console.log("titlle= ",title); console.log("newArr",newArr);

3、在項目根目錄（與package.json同級），創(chuàng)建一個名為.babelrc或.babelrc.json或者babel.config.js或babel.config.json的文件

重要參數：

• plugins：Babel插件可以將輸入源碼進行轉換，輸出編譯后的代碼。

• presets：一組Babel插件，目的是方便使用。官方已經內置了一些preset，如babel-preset-env。

4、安裝相應的轉換器，我們需要通過解釋器將我們的代碼轉換成瀏覽器可以支持的版本。
npm install --save-dev babel-preset-es2015 這是安裝es2015的轉換器

5、執(zhí)行轉換 babel src -d dist 將 src目錄下的代碼轉換成瀏覽器可以支持的代碼，并將代碼保存至dist目錄中 。

• 指定轉換單個文件babel src/test.js --out-file dist2/test2.js 將src下的test.js文件轉換后保存至dist2/test2.js(--out-file 可以使用-o代替)
• -d 或者 --out-dir 可以 將整個目錄轉碼 如 babel src -d dist
  

轉換之后的代碼，與未轉換前的對比，將箭頭函數改為function

"use strict";var name = "xiuyuandashen"; var title = "es6語法"; var arr = [1, 2, 3, 4, 5, 6];var newArr = arr.map(function (a) {return a * 2; }); console.log("name= ", name); console.log("titlle= ", title); console.log("newArr", newArr);

自定義腳本(簡化命令輸入)

我們可以在package.json腳本中定義命令。(Vue中所謂的npm run dev 也是如此)

{......,"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"babel src -d dist2"},...... }

scripts中定義的key，我們可以通過npm run key來訪問，這樣的話運行的命令就是key所對應的value命令了。

比如：上邊運行npm run build 相當于運行了babel src -d dist2。

以上這些都是后期前端框架的基礎，，

總結

以上是生活随笔為你收集整理的Babel入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。