Babel JS編譯器

發表於 | 分類於 | |

JavaScript 的語法主要由 ECMA 組織所訂定
而語法上的支援則由各家瀏覽器來實作

Babel 是 JavsScript 的編譯器
可以用來將 ES5+ 的版本轉譯為兼容各瀏覽器可運行的語法

工作實務上則是為了能讓腳本兼容低階瀏覽器所造成的問題

本篇介紹 babel 的簡單使用方式

內文

  • babel 相依套件
  • babel 基本安裝
  • babel 基本設定
  • babel 基本使用

babel 相依套件


  • babel-core

babel 的核心模組

  • babel-loader

提供 webpack 在讀取腳本時, 使用 baebl 讀取

  • babel-preset-env

為轉譯的預設
決定 babel 如何轉譯
如果沒有設定 preset
轉譯的代碼會原封不動的複製一份

  • babel-cli

能夠在 CLI 上直接使用 babel

  • babel-polyfill

babel 主要只提供語法轉換
像是新版的 API (Promise, Array.from, Object.assign …)
則需要此套件來協助處理

babel 基本安裝


本篇介紹最基本的使用
只需要安裝以下兩項套件即可

  • babel-cli
  • babel-preset-env

npm i -D babel-cli babel-preset-env

babel 基本設定


有多種方式可以設定 babel
底下介紹常用的兩種方式(選其中一種即可):

第一種

在 package.json 內新增以下設定

1
2
3
"babel": {
    "presets": ["env"]
  }

第二種

在專案目錄下新增 .babelrc 檔案並作以下設定

1
2
3
{
  "presets": ["env"]
}

babel 基本使用


有多種使用方式
底下介紹常用的兩種方式

直接在 CLI 下指令

npx babel <檔案> --out-dir <資料夾>

p.s. 如果加上參數 –presets=babel-preset-env 則可以不用設定另外設定 preset

在 package.json 中設定指令後提供 CLI 使用

1
2
3
"scripts": {
    "build": "babel <檔案> --out-dir <資料夾>"
  },

npm run build

本文作者： David Huang
本文地址： https://davidblog.github.io/2020/06/21/babel/

0%