02.ElementUI源碼學習:babel配置

2021-04-15 11:29

Anduril

閱讀(0)

評論(0)

編輯

書接上文，接下來項目将引入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為字首)。

@babel/cli

内置的 CLI 指令行工具，可通過指令行編譯檔案。官方文檔

@babel/core

babel的核心，包含各個核心的API，供babel插件和打包工具使用。官方文檔

@babel/preset-env

是一個常用的預設(Presets), 讓你能使用最新的JavaScript文法, 它會幫你轉換成代碼的目标運作環境支援的文法, 提升你的開發效率并讓打包後的代碼體積更小。相關參考

webpack loader 子產品安裝

JSX文法子產品安裝

JSX文法插件使用

babel-plugin-syntax-jsx

，沒有使用高版本的

@babel/plugin-syntax-jsx

,項目運作中後者會出現

Cannot find module babel-plugin-syntax-jsx

異常。

功能驗證

上述子產品安裝完畢後，在test目錄下，建立一個名為

babel-es6-test.js

的檔案

在指令行視窗輸入以下指令，編譯整個

test

檔案夾并輸出到

lib

(不存在則自動建立)檔案夾中

成功運作後，項目lib目錄下也會建立一個

babel-es6-test.js

的檔案，跟

test

目錄下的檔案是相同的，代碼沒有進行轉換。

Babel 本身不具有任何轉化功能，不配置任何插件時，經過 babel 的代碼和輸入是相同的。

在根目錄下建立

babel.config.json

檔案，配置如下：

再次運作指令，

lib

下輸出檔案代碼已經轉換

項目配置

更新

babel.config.json

配置

webpack.config.js

添加一條關于

babel-loader

的規則：

examples

新增檔案

JSX.vue

用來測試JSX文法

更新

examples\App.vue

檔案，引入

JSX.vue

元件

運作npm run dev，打開浏覽器，成功解析結果如下

0x02.示例代碼

Github Repo

分類 0x02.FrontEnd
标簽 element

02.ElementUI源碼學習:babel配置