02.ElementUI原始碼學習:babel配置

Anduril發表於2021-04-15

書接上文,接下來專案將引入babel支援ES6+語法相容。

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

0x00.babel概念

Babel 是一個編譯器(輸入原始碼 => 輸出編譯後的程式碼)。編譯過程分為三個階段:解析、轉換和列印輸出。

Babel 本身不具有任何轉化功能,它把轉化的功能都分解到一個個plugin 裡面。因此當我們不配置任何外掛時,經過 babel 的程式碼和輸入是相同的。

外掛(Plugins)

外掛總共分為兩種:語法外掛(Syntax Plugins)和轉譯外掛(Transform Plugins)。

  • 轉換外掛用於轉換你的程式碼。
  • 語法外掛只允許Babel解析(parse)特定型別的語法(而不是轉換)。

轉換外掛會自動啟用語法外掛。因此,如果你已經使用了相應的轉換外掛,則不需要指定語法外掛。
具體外掛列表,詳見官方文件。 Plugins

預設(Presets)

presets可以看作一組預先設定的外掛列表集合,我們可以不必再當獨地一個一個地去新增我們需要的外掛。

配置檔案

babel提供了config的方式,類似於webpack的cli方式以及config方式。官方文件

babel 7.X 之後,引入了babel.config.json (支援.js, .cjs, .mjs等檔案格式);在7.X之前,專案都是基於.babelrc(支援.json,.js, .cjs, .mjs等檔案格式)來進行配置。

一般babel.config.json會放置在根目錄下,在執行編譯時,babel會首先去尋找babel.config.json檔案,以此來作為整個專案的根配置。

babel.config.json 配置示例

{
  "presets": ["@babel/env"],
  "plugins": ["transform-vue-jsx"]
}

外掛的短名稱

如果外掛名稱的字首為 babel-plugin-,你還可以使用它的短名稱:

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 兩個外掛實際是同一個
  ]
}

適用於帶有冠名(scope)的外掛:

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 兩個外掛實際是同一個
  ]
}

預設的短名稱

如果 preset 名稱的字首為 babel-preset-,你還可以使用它的短名稱:

{
  "presets": [
    "myPreset",
    "babel-preset-myPreset" // equivalent
  ]
}

適用於帶有冠名(scope)的 preset:

{
  "presets": [
    "@org/babel-preset-name",
    "@org/name" // equivalent
  ]
}

執行順序

  • 外掛執行順序在presets之前
  • 外掛會按照宣告的外掛列表順序順序執行(first to last)
  • preset會按照宣告的列表順序逆序執行(last to first)

參考
https://www.cnblogs.com/rynxiao/p/13665506.html
https://babeljs.io/docs/en/config-files

0x01.babel安裝與配置

安裝所需包(package)

專案中引入bable(babel 7.0 以後的外掛與預設以@babel為字首)。

carbon (22).png

@babel/cli 內建的 CLI 命令列工具,可通過命令列編譯檔案。官方文件
@babel/core babel的核心,包含各個核心的API,供babel外掛和打包工具使用。官方文件
@babel/preset-env 是一個常用的預設(Presets), 讓你能使用最新的JavaScript語法, 它會幫你轉換成程式碼的目標執行環境支援的語法, 提升你的開發效率並讓打包後的程式碼體積更小。相關參考

webpack loader 模組安裝

carbon (25).png

JSX語法模組安裝

JSX語法外掛使用babel-plugin-syntax-jsx,沒有使用高版本的@babel/plugin-syntax-jsx,專案執行中後者會出現 Cannot find module babel-plugin-syntax-jsx 異常。

carbon (26).png

功能驗證

上述模組安裝完畢後,在test目錄下,建立一個名為babel-es6-test.js的檔案

carbon (23).png

在命令列視窗輸入以下指令,編譯整個test資料夾並輸出到lib(不存在則自動建立)資料夾中

carbon (24).png

成功執行後,專案lib目錄下也會建立一個babel-es6-test.js的檔案,跟test目錄下的檔案是相同的,程式碼沒有進行轉換。

Babel 本身不具有任何轉化功能,不配置任何外掛時,經過 babel 的程式碼和輸入是相同的。

在根目錄下建立babel.config.json檔案,配置如下:

carbon (27).png

再次執行指令,lib下輸出檔案程式碼已經轉換

carbon (28).png

專案配置

更新babel.config.json配置

carbon (33).png

webpack.config.js新增一條關於babel-loader的規則:

carbon (35).png

目錄examples新增檔案JSX.vue用來測試JSX語法

carbon (34).png

更新examples\App.vue檔案,引入JSX.vue元件

carbon (36).png

執行npm run dev,開啟瀏覽器,成功解析結果如下

微信截圖_20210415105826.png

最新目錄結構

carbon (39).png

0x02.示例程式碼

Github Repo

相關文章