跳至主要內容

選項

可以透過各種方式將選項傳遞給 Babel。當直接傳遞給 Babel 時,你可以傳遞選項物件。當透過包裝器使用 Babel 時,可能也需要或至少更有用的是透過設定檔傳遞選項。

如果透過 @babel/cli 傳遞選項,你將需要將名稱轉換為 kebab-case。例如

npx babel --root-mode upward file.js # equivalent of passing the rootMode config option

主要選項

這些選項僅允許作為 Babel 程式化選項的一部分,因此它們主要供包裝 Babel 的工具或直接呼叫 babel.transform 的人使用。Babel 整合的使用者,例如 babel-loader@babel/register不太可能使用這些選項。

cwd

類型:字串
預設值:process.cwd()

程式化選項中所有路徑都將相對於此工作目錄解析。

caller

類型:具有下列形狀的物件

interface CallerData {
name: string;
supportsStaticESM?: boolean;
supportsDynamicImport?: boolean;
supportsTopLevelAwait?: boolean;
supportsExportNamespaceFrom?: boolean;
}
歷程
版本變更
v7.11.0新增 supportsExportNamespaceFrom
v7.7.0新增 supportsTopLevelAwait
v7.5.0新增 supportsDynamicImport

公用程式可以傳遞 caller 物件,以向 Babel 識別自己,並傳遞與功能相關的旗標,供設定檔、預設值和外掛使用。例如

JavaScript
babel.transformFileSync("example.js", {
caller: {
name: "my-custom-tool",
supportsStaticESM: true,
},
});

將允許外掛和預設值決定,由於支援 ES 模組,他們將略過將 ES 模組編譯成 CommonJS 模組。

filename

類型:字串

如果有的話,與目前正在編譯的程式碼關聯的檔案名稱。檔案名稱是選用的,但當檔案名稱未知時,並非 Babel 的所有功能都可用,因為部分選項的功能仰賴檔案名稱。

使用者可能會遇到的三個主要情況為

  • 檔案名稱會公開給外掛程式。有些外掛程式可能需要檔案名稱。
  • "test""exclude""ignore" 等選項需要檔案名稱來進行字串/正規表示式比對。
  • .babelrc.json.babelrc 檔案會根據要編譯的檔案進行載入。如果省略此選項,Babel 會像已設定 babelrc: false 一樣運作。

filenameRelative

類型:字串
預設值:path.relative(opts.cwd, opts.filename)(如果已傳遞 "filename"

用作 Babel 的 sourceFileName 選項的預設值,並用於產生 AMD / UMD / SystemJS 模組轉換的檔案名稱。

code

類型:boolean
預設值:true

Babel 的預設回傳值包含 codemap 屬性,其中包含產生的產生式碼。在需要多次呼叫 Babel 的某些情況下,停用產生式碼並改用 ast: true 直接取得 AST 可能有助於避免執行不必要的作業。

ast

類型:boolean
預設值:false

Babel 的預設是產生字串和原始碼對應,但在某些情況下取得 AST 本身會很有用。這項功能的主要用途會是一連串多重轉換傳遞,例如

JavaScript
const filename = "example.js";
const source = fs.readFileSync(filename, "utf8");

// Load and compile file normally, but skip code generation.
const { ast } = babel.transformSync(source, {
filename,
ast: true,
code: false,
});

// Minify the file in a second pass and generate the output code here.
const { code, map } = babel.transformFromAstSync(ast, source, {
filename,
presets: ["minify"],
babelrc: false,
configFile: false,
});

注意:此選項預設未啟用,因為大多數使用者不需要它,而且我們最終希望為 Babel 加入快取層。必須快取 AST 結構會佔用更多空間。

cloneInputAst

類型:boolean
預設值:true
v7.11.0 中新增

預設情況下,babel.transformFromAst 會複製輸入 AST 以避免突變。指定 cloneInputAst: false 可以提升解析效能,如果輸入 AST 沒有在其他地方使用的話。

設定載入選項

載入設定可能會有點複雜,因為環境可能有多種設定檔類型,而且這些設定檔可能會有多個巢狀設定物件,會根據設定套用。

root

類型:字串
預設值:opts.cwd
放置位置:僅允許在 Babel 的程式化選項中

將根據 "rootMode" 處理的初始路徑,以決定當前 Babel 專案的概念根資料夾。這用於兩種主要情況

  • 檢查預設 "configFile" 值時的基礎目錄
  • "babelrcRoots" 的預設值。

rootMode

類型:"root" | "upward" | "upward-optional"
預設值:"root"
放置位置:僅允許在 Babel 的程式化選項中
v7.1.0 中新增

此選項與 "root" 值結合,定義 Babel 如何選擇其專案根目錄。不同的模式定義 Babel 處理 "root" 值的不同方式,以取得最終專案根目錄。

注意:babel.config.json 從 Babel 7.8.0 開始支援。在較舊的 Babel 7 版本中,僅支援 babel.config.js

"root" 是預設模式,因為它避免了 Babel 意外載入完全位於當前專案資料夾外部的 babel.config.json 的風險。如果您使用 "upward-optional",請注意它會沿著目錄結構一直向上走到檔案系統根目錄,而且總有可能有人會忘記在他們的家目錄中放置 babel.config.json,這可能會導致您的建置發生意外的錯誤。

具有 monorepo 專案結構的使用者,會針對每個套件執行建置/測試,他們可能會想要使用 "upward",因為 monorepo 通常在專案根目錄中有一個 babel.config.json。在沒有 "upward" 的情況下,在 monorepo 子目錄中執行 Babel,將導致 Babel 跳過載入專案根目錄中的任何 babel.config.json 檔案,這可能會導致意外的錯誤和編譯失敗。

envName

類型:字串
預設值:process.env.BABEL_ENV || process.env.NODE_ENV || "development"
放置位置:僅允許在 Babel 的程式化選項中

在載入組態期間使用的目前活動環境。此值用於解析 "env" 組態時的關鍵,也可以透過 api.env() 函式在組態函式、外掛程式和預設值中使用。

configFile

類型:字串 | 布林值
預設值:path.resolve(opts.root, "babel.config.json"),如果存在,否則為 false
放置位置:僅允許在 Babel 的程式化選項中

預設會搜尋預設的 babel.config.json 檔案,但可以傳遞任何 JS 或 JSON5 組態檔的路徑。

注意:此選項不會影響 .babelrc.json 檔案的載入,因此儘管您可能會想執行 configFile: "./foo/.babelrc.json",但並不建議這麼做。如果給定的 .babelrc.json 是透過標準檔案相對邏輯載入,您最終會載入相同的組態檔兩次,並將其與自身合併。如果您要連結特定組態檔,建議採用與「babelrc」名稱無關的命名方式。

babelrc

類型:boolean
預設值:true,只要已指定 filename 選項
放置位置:允許在 Babel 的程式化選項中,或在載入的 "configFile" 內部。程式化選項會覆寫組態檔選項。

true 會啟用搜尋 組態檔 和舊版 .babelignore 檔案,這些檔案相對於提供給 Babel 的 "filename"

在程式化選項中傳遞的 babelrc 值會覆寫組態檔中設定的值。

注意:僅當目前的 "filename" 位於與其中一個 "babelrcRoots" 套件相符的套件中時,才會載入 .babelrc.json 檔案。

babelrcRoots

類型:boolean | MatchPattern | Array<MatchPattern>
預設:opts.root
放置位置:允許在 Babel 的程式化選項中,或載入的 configFile 內部。程式化選項會覆寫設定檔選項。

預設情況下,Babel 只會在 "root" 套件中搜尋 .babelrc.json 檔案,因為否則 Babel 無法知道給定的 .babelrc.json 是否要載入,或者它是否為 "plugins""presets",甚至是否已安裝,因為正在編譯的檔案可能在 node_modules 內部,或已連結到專案中。

此選項允許使用者提供其他套件的清單,在考慮是否載入 .babelrc.json 檔案時,應將這些套件視為「根」套件。

例如,希望允許個別套件擁有自己的設定檔的單一存放庫設定,可能需要執行

JavaScript
babelrcRoots: [
// Keep the root as a root
".",

// Also consider monorepo packages "root" and load their .babelrc.json files.
"./packages/*",
];

外掛程式和預設值選項

plugins

類型:Array<PluginEntry | Plugin> (PluginEntry)
預設:[]

在處理此檔案時要啟用的外掛程式陣列。有關個別條目如何互動的詳細資訊,特別是在多個巢狀 "env""overrides" 設定檔中使用時,請參閱 合併

注意:此選項也允許來自 Babel 本身的 Plugin 實例,但建議不要直接使用這些實例。如果您需要建立外掛程式或預設值的持續表示形式,您應該使用 babel.createConfigItem()

presets

類型:Array<PresetEntry> (PresetEntry)
預設:[]

處理此檔案時要啟用的預設值陣列。有關個別項目如何互動的更多資訊,特別是在多個巢狀 "env""overrides" 設定檔中使用時,請參閱 合併

注意:預設值的格式與外掛相同,但名稱正規化預期為「preset-」而非「plugin-」,而且預設值無法為 Plugin 的執行個體。

passPerPreset

類型:boolean
預設值:false
狀態:已棄用

指示 Babel 將 presets 陣列中的每個預設值作為獨立的傳遞執行。此選項傾向於在外掛的確切順序周圍造成許多混淆,但如果你絕對需要將一組操作作為獨立的編譯傳遞執行時,這將很有用。

注意:當我們新增對定義外掛之間順序的更好支援時,此選項可能會在未來的 Babel 版本中移除。

輸出目標

targets

類型:字串 | Array<字串> | { [字串]: 字串 }
預設值:{}
放置:允許在 Babel 的程式化選項或設定檔中
新增於:v7.13.0

歷程
版本變更
v7.20.0支援 deno 目標
v7.15.0支援 rhino 目標

描述專案支援/鎖定的環境。

這可以是 與瀏覽器清單相容 的查詢(有 但書

babel.config.json
{
"targets": "> 0.25%, not dead"
}

或支援的最小環境版本物件

babel.config.json
{
"targets": {
"chrome": "58",
"ie": "11"
}
}

支援的環境:androidchromedenoedgeelectronfirefoxieiosnodeoperarhinosafarisamsung

如果未指定次要版本,Babel 會將其解釋為 MAJOR.0。例如,"node": 12 會視為 Node.js 12.0。

無目標

未指定目標時:Babel 會假設您鎖定最舊的瀏覽器。例如,@babel/preset-env 會將所有 ES2015-ES2020 程式碼轉換為相容於 ES5。

提示

我們建議設定 targets 以縮小輸出程式碼大小。

babel.config.json
{
"presets": ["@babel/preset-env"]
}

因此,Babel 的行為與 瀏覽器清單 不同:當在 Babel 瀏覽器清單設定檔中找不到任何目標時,它不會使用 defaults 查詢。如果您要使用 defaults 查詢,您需要明確將其傳遞為目標

babel.config.json
{
"targets": "defaults"
}

我們承認這並非理想,並會在 Babel v8 中重新審視這一點。

:::

targets.esmodules

類型:boolean

您也可以鎖定支援 ES 模組 的瀏覽器。當指定 esmodules 目標時,它會與 browsers 目標和 瀏覽器清單 的目標相交。您可以將此方法與 <script type="module"></script> 結合使用,以有條件地提供較小的腳本給使用者 (https://jakearchibald.com/2017/es-modules-in-browsers/#nomodule-for-backwards-compatibility).

指定 browsers 和 esmodules 目標時,它們將會相交。
babel.config.json
{
"targets": {
"esmodules": true
}
}

targets.node

類型:字串 | "current" | true

如果您想針對目前的節點版本編譯,您可以指定 "node": true"node": "current",這與 "node": process.versions.node 相同。

或者,您可以在瀏覽器清單查詢中指定節點版本

babel.config.json
{
"targets": "node 12" // not recommended
}

在這種情況下,瀏覽器清單會將其解析為 node-releases 函式庫中可用的最新版本。由於 Node.js 可能在次要版本中支援新的語言功能,因此針對 Node.js 12.22 生成的程式可能會在 Node.js 12.0 上擲出語法錯誤。我們建議您在使用瀏覽器清單中的節點查詢時,務必指定次要版本

babel.config.json
{
"targets": "node 12.0"
}

targets.safari

類型:字串 | "tp"

如果您想針對 Safari 的技術預覽版本編譯,您可以指定 "safari": "tp"

targets.browsers

類型:字串 | Array<string>

使用 瀏覽器清單 進行瀏覽器查詢(例如:最後 2 個版本、> 5%、safari tp)。

請注意,瀏覽器的結果會被 targets 中明確的項目覆寫。

targets.deno

類型:字串

最低支援版本為 1.0。

babel.config.json
{
"targets": {
"deno": "1.9"
}
}

browserslistConfigFile

類型:boolean
預設值:true
放置:允許在 Babel 的程式化選項或設定檔中
新增於:v7.13.0

切換是否使用 瀏覽器清單設定來源,其中包括搜尋任何瀏覽器清單檔案或參照 package.json 中的瀏覽器清單金鑰。這對於使用瀏覽器清單設定檔來處理不會使用 Babel 編譯的檔案的專案很有用。

如果指定字串,它必須代表瀏覽器清單設定檔的檔案路徑。相對路徑會根據指定此選項的設定檔或在作為程式化選項的一部分傳遞時,根據 cwd 來解析。

browserslistEnv

類型:字串
預設值:未定義
放置:允許在 Babel 的程式化選項或設定檔中
新增於:v7.13.0

要使用的 瀏覽器清單環境

設定合併選項

extends

類型:字串
放置:不允許在預設設定中

組態可以「延伸」其他組態檔案。目前組態中的組態欄位會與延伸檔案的組態合併

env

類型:{ [envKey: string]: Options }
放置:不得嵌套於另一個 env 區塊內。

允許使用完整的嵌套組態選項,前提是 envKeyenvName 選項相符。

注意:env[envKey] 選項會與根物件中指定的選項合併

overrides

類型:Array<Options>
放置:不得嵌套於另一個 overrides 物件內,或在 env 區塊內。

允許使用者提供選項陣列,這些選項會逐一合併至目前的組態。此功能最適合與 "test"/"include"/"exclude" 選項搭配使用,以提供適用覆寫的條件。例如

JavaScript
overrides: [{
test: "./vendor/large.min.js",
compact: true,
}],

可以用來為已知為大型且已壓縮的特定檔案啟用 compact 選項,並告訴 Babel 不必嘗試漂亮地列印檔案。

test

類型:MatchPattern | Array<MatchPattern> (MatchPattern)

如果所有模式都無法配對,目前設定檔物件將被視為非作用中,且在設定處理期間將被忽略。此選項在用於overrides選項物件時最有幫助,但它允許在任何地方使用。

注意:這些切換不會影響較早區段中的程式化和設定載入選項,因為它們在準備要合併的設定之前很久就會被考量在內。

include

類型:MatchPattern | Array<MatchPattern> (MatchPattern)

此選項是 "test" 的同義詞。

exclude

類型:MatchPattern | Array<MatchPattern> (MatchPattern)

如果任何模式配對,目前設定檔物件將被視為非作用中,且在設定處理期間將被忽略。此選項在用於overrides選項物件時最有幫助,但它允許在任何地方使用。

注意:這些切換不會影響較早區段中的程式化和設定載入選項,因為它們在準備要合併的設定之前很久就會被考量在內。

ignore

類型:Array<MatchPattern> (MatchPattern)
放置:不允許在預設設定中

如果任何模式配對,Babel 將立即停止所有目前組建的處理。例如,使用者可能想要執行類似

JavaScript
ignore: ["./lib"];

明確停用 lib 目錄內檔案的 Babel 編譯。

注意:此選項會停用檔案的所有 Babel 處理。雖然它有其用途,但值得考慮 "exclude" 選項作為較不激進的替代方案。

only

類型:Array<MatchPattern> (MatchPattern)
放置:不允許在預設設定中

如果所有模式都無法配對,Babel 將立即停止所有目前組建的處理。例如,使用者可能想要執行類似

JavaScript
only: ["./src"];

明確啟用 src 目錄內檔案的 Babel 編譯,同時停用其他所有檔案。

注意:此選項會停用 Babel 對檔案的所有處理。雖然這有其用途,但不妨考慮使用 "test"/"include" 選項作為較不激進的替代方案。

Source Map 選項

inputSourceMap

類型:布林值 | SourceMap
預設值:true

如果檔案本身包含 //# sourceMappingURL=... 註解,true 會嘗試從檔案本身載入輸入 sourcemap。如果找不到對應的 map,或 map 無法載入和剖析,它將會在不發出任何訊息的情況下被捨棄。

如果提供一個物件,它將被視為 source map 物件本身。

sourceMaps

類型:布林值 | "inline" | "both"
預設值:false

  • true 會為程式碼產生一個 sourcemap,並將它包含在結果物件中。
  • "inline" 會產生一個 sourcemap,並將它附加為資料 URL 到程式碼的結尾,但不會將它包含在結果物件中。
  • "both" 與 inline 相同,但會將 map 包含在結果物件中。

@babel/cli 會覆寫其中一些選項,以影響 map 寫入磁碟的方式

  • true 會將 map 寫入磁碟上的 .map 檔案
  • "inline" 會直接寫入檔案,因此它會包含一個含有 map 的 data:
  • "both" 會使用 data: URL 和 .map 寫入檔案。

注意:這些選項有點奇怪,因此根據你的使用案例,最合理的做法可能是只使用 true,並在你的程式碼中自行處理其他部分。

sourceMap

這是 sourceMaps 的同義詞。建議使用 sourceMaps

sourceFileName

類型:字串
預設值:path.basename(opts.filenameRelative)(如果可用)或 "unknown"

用於原始碼對應物件內檔案的名稱。

sourceRoot

類型:字串

如果需要,在產生的原始碼對應中設定的 sourceRoot 欄位。

其他選項

sourceType

類型:"script" | "module" | "unambiguous"
預設值:"module"

  • "script" - 使用 ECMAScript Script 語法分析檔案。不允許 import/export 陳述式,且檔案不處於嚴格模式。
  • "module" - 使用 ECMAScript Module 語法分析檔案。檔案自動處於嚴格模式,且允許 import/export 陳述式。
  • "unambiguous" - 如果存在 import/export 陳述式,則將檔案視為「模組」,否則將其視為「腳本」。

在類型未知的情況下,unambiguous 可能相當有用,但它可能會導致錯誤比對,因為模組檔案完全可以不使用 import/export 陳述式。

此選項很重要,因為目前檔案的類型會影響輸入檔案的分析,以及某些可能希望將 import/require 用法新增到目前檔案的轉換。

例如,@babel/plugin-transform-runtime 依賴目前文件的類型來決定是要插入 import 宣告,還是 require() 呼叫。@babel/preset-env 也對其 "useBuiltIns" 選項執行相同的動作。由於 Babel 預設將檔案視為 ES 模組,因此一般來說這些外掛/預設值會插入 import 陳述式。設定正確的 sourceType 很重要,因為類型錯誤可能會導致 Babel 將 import 陳述式插入到應為 CommonJS 檔案的檔案中。這在執行 node_modules 相依項編譯的專案中特別重要,因為插入 import 陳述式可能會導致 Webpack 和其他工具將檔案視為 ES 模組,進而中斷原本應為功能正常的 CommonJS 檔案。

注意:此選項不會影響 .mjs 檔案的剖析,因為它們目前硬式編碼為總是剖析為 "module" 檔案。

assumptions

類型:{ [assumption: string]: boolean }
預設值:{}
新增於:v7.13.0
放置:允許在程式設計選項、組態檔和預設值中。

設定 Babel 可以進行的假設,以產生較小的輸出

babel.config.json
{
"assumptions": {
"iterableIsArray": true
},
"presets": ["@babel/preset-env"]
}

如需更多資訊,請查看 assumptions 文件頁面。

highlightCode

類型:boolean
預設值:true

在 Babel 的錯誤訊息中,突顯程式碼片段中的代碼,以方便閱讀。

wrapPluginVisitorMethod

類型:(key: string, nodeType: string, fn: Function) => Function

允許使用者在每個訪客上新增包裝函式,以便在 Babel 執行外掛程式時檢查訪客程序。

  • key 是表示正在執行的外掛程式的簡單不透明字串。
  • nodeType 是目前正在拜訪的 AST 節點類型。
  • fn 是訪客函式本身。

使用者可以傳回一個替換函式,該函式應在執行任何他們希望進行的記錄和分析後,呼叫原始函式。

parserOpts

類型:{}

包含要傳遞給正在使用的剖析器的選項的不透明物件。

有關可用的剖析器選項,請參閱 剖析器選項

generatorOpts

類型:{}

包含要傳遞給正在使用的程式碼產生器的選項的不透明物件。請參閱 程式碼產生器選項 以取得最常用的選項。

程式碼產生器選項

retainLines

類型:boolean
預設值:false

Babel 會盡力產生程式碼,以便項目印在原始檔案中它們所在的行上。此選項的存在是為了讓無法使用原始碼對應的人員可以取得模糊有用的錯誤行號,但這只是盡力而為,並無法保證在所有情況下都適用於所有外掛程式。

compact

類型:boolean | "auto"
預設值:"auto"

「auto」會透過評估 code.length > 500_000 來設定值

在精簡模式下產生程式碼時,所有非必要的換行符號和空白字元都會省略。

minified

類型:boolean
預設值:false

包含 compact: true,省略區塊結尾分號,在可能的情況下省略 new Foo() 中的 (),並可能輸出較短版本的文字。

auxiliaryCommentBefore

類型:字串

允許指定前置註解,以插入到原始檔案中不存在的程式碼片段之前。

注意:判斷什麼存在或不存在於原始檔案中的定義可能會有點複雜,因此不建議使用此選項。如果你需要以某種方式註解程式碼,最好使用 Babel 外掛程式來執行此操作。

auxiliaryCommentAfter

類型:字串

允許指定前置註解,以插入到原始檔案中不存在的程式碼片段之後。

注意:判斷什麼存在或不存在於原始檔案中的定義可能會有點複雜,因此不建議使用此選項。如果你需要以某種方式註解程式碼,最好使用 Babel 外掛程式來執行此操作。

comments

類型:boolean
預設值:true

如果未提供函式,則為 shouldPrintComment 提供預設註解狀態。請參閱該選項的預設值以取得更多資訊。

shouldPrintComment

類型:(value: string) => boolean
不使用 minified 的預設值:(val) => opts.comments || /@license|@preserve/.test(val)
使用 minified 的預設值:() => opts.comments

一個函數,可用於決定是否將給定的註解包含在 Babel 輸出的程式碼中。

進階用法

如需更多程式碼產生器選項,請參閱 產生器選項

AMD / UMD / SystemJS 模組選項

moduleIds

類型:boolean
預設值:!!opts.moduleId

啟用模組 ID 產生。

moduleId

類型:字串

用於模組的硬式編碼 ID。無法與 getModuleId 搭配使用。

getModuleId

類型:(name: string) => string

給予 babel 產生的模組名稱,傳回要使用的名稱。傳回假值將使用原始 name

moduleRoot

類型:字串

要包含在產生的模組名稱中的根路徑。

選項概念

MatchPattern

類型:string | RegExp | (filename: string | void, context: { caller: { name: string } | void, envName: string, dirname: string ) => boolean

多個 Babel 選項會針對檔案路徑執行測試。一般來說,這些選項支援常見的模式方法,其中每個模式可以是

  • 字串 - 檔案路徑,支援 *** 作為完整段落比對。任何符合此模式的檔案或父資料夾都算比對成功。路徑遵循 Node 的一般路徑邏輯,因此在 POSIX 中必須以 / 分隔,但在 Windows 中則同時支援 /\
  • 正規表示式 - 與正規化檔案名稱比對的正規表示式。在 POSIX 中,路徑正規表示式會針對以 / 分隔的路徑執行,而在 Windows 中則會針對以 \ 分隔的路徑執行。

重要的是,如果使用其中任何一個,Babel 會要求 filename 選項存在,否則會將其視為錯誤。

  • (filename: 字串 | 空值, context: { caller: { name: 字串 } | 空值, envName: 字串, dirname: 字串 }) => 布林值 是應該回傳布林值的通用回呼,以表示是否比對成功。此函式會傳遞檔案名稱或 undefined(如果未提供給 Babel)。它也會傳遞由 Babel 最上層呼叫指定的目前 envNamecaller 選項,以及設定檔目錄或目前工作目錄(如果轉換是以程式方式呼叫)的 dirname

合併

請參閱 Babel 如何合併設定檔項目

外掛/預設值項目

外掛項目 / 預設值項目

個別外掛/預設值項目可以有數種不同的結構

  • EntryTarget - 個別外掛
  • [EntryTarget, EntryOptions] - 個別外掛與選項
  • [EntryTarget, EntryOptions, string] - 個別外掛與選項和名稱(有關名稱的更多資訊,請參閱合併
  • ConfigItem - 由 babel.createConfigItem() 建立的外掛設定項目。

除非個別指定不同的名稱,否則無法重複使用相同的 EntryTarget,否則會產生重複外掛/預設集的錯誤。

這可能有點難讀,因此舉例說明

JavaScript
plugins: [
// EntryTarget
'@babel/plugin-transform-classes',

// [EntryTarget, EntryOptions]
['@babel/plugin-transform-arrow-functions', { spec: true }],

// [EntryTarget, EntryOptions, string]
['@babel/plugin-transform-for-of', { loose: true }, "some-name"],

// ConfigItem
babel.createConfigItem(require("@babel/plugin-transform-spread")),
],

EntryTarget

類型:字串 | {} | 函式

外掛/預設集目標可能來自幾個不同的來源

  • 字串 - require 類型的路徑或外掛/預設集識別碼。識別碼將透過名稱正規化傳遞。
  • {} | 函式 - 經過 require() 後的實際外掛/預設集物件或函式。

EntryOptions

類型:未定義 | {} | false

執行外掛/預設集時,會傳遞選項。未定義會正規化為空物件。

false 表示項目已完全停用。這在順序很重要的情況下很有用,但需要一個獨立條件來決定是否啟用某個項目。例如

JavaScript
plugins: [
'one',
['two', false],
'three',
],
overrides: [{
test: "./src",
plugins: [
'two',
]
}]

會對 src 中的檔案啟用 two 外掛,但 two 仍會在 onethree 之間執行。

名稱正規化

預設情況下,Babel 預期外掛的名稱具有 babel-plugin-babel-preset- 前綴。為了避免重複,Babel 有一個名稱正規化階段,在載入項目時會自動新增這些前綴。這歸結為幾個主要規則

  • 絕對路徑會直接通過。
  • ./ 開頭的相對路徑會直接通過。
  • 套件內部的檔案參考會保持不變。
  • 任何以 module: 為前綴的識別碼都會移除前綴,但其他部分保持不變。
  • 對於任何沒有 plugin-/preset- 前綴的 @babel 範圍套件,都會在開頭插入 plugin-/preset-
  • 對於任何沒有 babel-plugin-/babel-preset- 前綴的非範圍套件,都會插入 babel-plugin-/babel-preset- 作為前綴。
  • 對於任何 @ 範圍套件,如果名稱任何地方都沒有 babel-plugin-/babel-preset-,都會插入 babel-plugin-/babel-preset- 作為前綴。
  • 如果只給定 @ 範圍名稱,則會插入 babel-plugin/babel-preset 作為套件名稱。

以下是套用於外掛內容時的一些範例

輸入正規化
"/dir/plugin.js""/dir/plugin.js"
"./dir/plugin.js""./dir/plugin.js"
"mod""babel-plugin-mod"
"mod/plugin""mod/plugin"
"babel-plugin-mod""babel-plugin-mod"
"@babel/mod""@babel/plugin-mod"
"@babel/plugin-mod""@babel/plugin-mod"
"@babel/mod/plugin""@babel/mod/plugin"
"@scope""@scope/babel-plugin"
"@scope/babel-plugin""@scope/babel-plugin"
"@scope/mod""@scope/babel-plugin-mod"
"@scope/babel-plugin-mod""@scope/babel-plugin-mod"
"@scope/prefix-babel-plugin-mod""@scope/prefix-babel-plugin-mod"
"@scope/mod/plugin""@scope/mod/plugin"
"module:foo""foo"