Web前端 -- 利用Babel來將ES6轉化為ES5代碼

一、簡介

Babel用來將ES6代碼轉為ES5代碼。

二、安裝

安裝命令行轉碼工具

Babel提供babel-cli工具，用於命令行轉碼。它的安裝命令如下：

npm install --global babel-cli

#查看是否安裝成功
babel --version

三、Babel的使用

1、初始化項目

npm init -y

2、創建文件

src/example.js

下面是一段ES6代碼：

// 轉碼前
// 定義數據
let input = [1, 2, 3]
// 將數組的每個元素 +1
input = input.map(item => item + 1)
console.log(input)

2、配置.babelrc

Babel的配置文件是.babelrc，存放在項目的根目錄下，該文件用來設置轉碼規則和插件，基本格式如下。

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

presets字段設定轉碼規則，將es2015規則加入 .babelrc：

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

3、安裝轉碼器

在項目中安裝

npm install --save-dev babel-preset-es2015

4、轉碼

# 轉碼結果寫入一個文件
mkdir dist1
# --out-file 或 -o 參數指定輸出文件
babel src/es6.js --out-file dist1/es5.js
# 或者
babel src/es6.js -o dist1/es5.js

# 整個目錄轉碼
mkdir dist2
# --out-dir 或 -d 參數指定輸出目錄
babel src --out-dir dist2
# 或者
babel src -d dist2