技術標籤：babel

簡介

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的程式碼轉換為向後相容的 JavaScript 語法，以便能夠執行在當前和舊版本的瀏覽器或其他環境中。

安裝

• 控制檯命令視窗執行命令：npm install -g babel-cli。
• 還可以使用阿里雲映象，執行命令：cnpm install -g babel-cli，下載速度更快。
• 檢視是否安裝成功：babel --version，即檢視安裝的babel版本。

使用

1. 建立babel資料夾（以下的命令都是在這個資料夾中執行）
2. 初始化專案：npm init -y
3. 建立src/example.js檔案，下面是一段ES6程式碼:

//ES6
let name="THU";
const title="大學";
let arr=[1,2,3,4,5,6,7,8,9,10];
let arr2=arr.map(obj=>obj*2);
console.log(arr2);
console.log(name);
console.log(title);

4. 配置 .babelrc 檔案，這是babel的配置檔案，存放在專案的根目錄下，該檔案用來設定轉碼規則和外掛，其基本格式如下：

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

• presets欄位設定轉碼規則，將es2015加入到.babelrc，

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

5. 安裝轉碼器，在專案中安裝，執行命令：

    cnpm install --save-dev babel-preset-es2015
   

6. 轉碼（兩種方法）

   • 執行命令：babel src -d dist，將src目錄下的所有原始檔全部編譯成對應的es2015檔案，會在src同級目錄中建立一個dist目錄，將編譯好的檔案放在dist目錄中。

   • 自定義指令碼，在package.json檔案中進行配置

     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "dev":"babel src -d dist"
      },
   

   再執行命令：npm run dev，這裡的“dev”也就是在json檔案中配置的鍵的名稱。

目錄結構如下：