選項
可以透過各種方式將選項傳遞給 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 識別自己,並傳遞與功能相關的旗標,供設定檔、預設值和外掛使用。例如
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 的預設回傳值包含 code
和 map
屬性,其中包含產生的產生式碼。在需要多次呼叫 Babel 的某些情況下,停用產生式碼並改用 ast: true
直接取得 AST 可能有助於避免執行不必要的作業。
ast
類型:boolean
預設值:false
Babel 的預設是產生字串和原始碼對應,但在某些情況下取得 AST 本身會很有用。這項功能的主要用途會是一連串多重轉換傳遞,例如
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"
- 將"root"
值傳遞為未變更。"upward"
- 從"root"
目錄向上尋找,尋找包含babel.config.json
檔案的目錄,如果找不到babel.config.json
,則擲回錯誤。"upward-optional"
- 從"root"
目錄向上尋找,尋找包含babel.config.json
檔案的目錄,如果找不到babel.config.json
,則回退至"root"
。
"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
檔案時,應將這些套件視為「根」套件。
例如,希望允許個別套件擁有自己的設定檔的單一存放庫設定,可能需要執行
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 目標 |
描述專案支援/鎖定的環境。
{
"targets": "> 0.25%, not dead"
}
或支援的最小環境版本物件
{
"targets": {
"chrome": "58",
"ie": "11"
}
}
支援的環境:android
、chrome
、deno
、edge
、electron
、firefox
、ie
、ios
、node
、opera
、rhino
、safari
、samsung
。
如果未指定次要版本,Babel 會將其解釋為 MAJOR.0
。例如,"node": 12
會視為 Node.js 12.0。
無目標
未指定目標時:Babel 會假設您鎖定最舊的瀏覽器。例如,@babel/preset-env
會將所有 ES2015-ES2020 程式碼轉換為相容於 ES5。
我們建議設定 targets
以縮小輸出程式碼大小。
{
"presets": ["@babel/preset-env"]
}
因此,Babel 的行為與 瀏覽器清單 不同:當在 Babel 或 瀏覽器清單設定檔中找不到任何目標時,它不會使用 defaults
查詢。如果您要使用 defaults
查詢,您需要明確將其傳遞為目標
{
"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 目標時,它們將會相交。{
"targets": {
"esmodules": true
}
}
targets.node
類型:字串 | "current" | true
。
如果您想針對目前的節點版本編譯,您可以指定 "node": true
或 "node": "current"
,這與 "node": process.versions.node
相同。
或者,您可以在瀏覽器清單查詢中指定節點版本
{
"targets": "node 12" // not recommended
}
在這種情況下,瀏覽器清單會將其解析為 node-releases
函式庫中可用的最新版本。由於 Node.js 可能在次要版本中支援新的語言功能,因此針對 Node.js 12.22 生成的程式可能會在 Node.js 12.0 上擲出語法錯誤。我們建議您在使用瀏覽器清單中的節點查詢時,務必指定次要版本
{
"targets": "node 12.0"
}
targets.safari
類型:字串 | "tp"
。
如果您想針對 Safari 的技術預覽版本編譯,您可以指定 "safari": "tp"
。
targets.browsers
類型:字串 | Array<string>
。
使用 瀏覽器清單 進行瀏覽器查詢(例如:最後 2 個版本、> 5%、safari tp)。
請注意,瀏覽器的結果會被 targets
中明確的項目覆寫。
targets.deno
類型:字串
。
最低支援版本為 1.0。
{
"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
區塊內。
允許使用完整的嵌套組態選項,前提是 envKey
與 envName
選項相符。
注意:env[envKey]
選項會與根物件中指定的選項合併。
overrides
類型:Array<Options>
放置:不得嵌套於另一個 overrides
物件內,或在 env
區塊內。
允許使用者提供選項陣列,這些選項會逐一合併至目前的組態。此功能最適合與 "test"
/"include"
/"exclude"
選項搭配使用,以提供適用覆寫的條件。例如
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 將立即停止所有目前組建的處理。例如,使用者可能想要執行類似
ignore: ["./lib"];
明確停用 lib
目錄內檔案的 Babel 編譯。
注意:此選項會停用檔案的所有 Babel 處理。雖然它有其用途,但值得考慮 "exclude"
選項作為較不激進的替代方案。
only
類型:Array<MatchPattern>
(MatchPattern
)
放置:不允許在預設設定中
如果所有模式都無法配對,Babel 將立即停止所有目前組建的處理。例如,使用者可能想要執行類似
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 可以進行的假設,以產生較小的輸出
{
"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 最上層呼叫指定的目前envName
和caller
選項,以及設定檔目錄或目前工作目錄(如果轉換是以程式方式呼叫)的dirname
。
合併
請參閱 Babel 如何合併設定檔項目。
外掛/預設值項目
外掛項目
/ 預設值項目
個別外掛/預設值項目可以有數種不同的結構
EntryTarget
- 個別外掛[EntryTarget, EntryOptions]
- 個別外掛與選項[EntryTarget, EntryOptions, string]
- 個別外掛與選項和名稱(有關名稱的更多資訊,請參閱合併)ConfigItem
- 由babel.createConfigItem()
建立的外掛設定項目。
除非個別指定不同的名稱,否則無法重複使用相同的 EntryTarget
,否則會產生重複外掛/預設集的錯誤。
這可能有點難讀,因此舉例說明
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
表示項目已完全停用。這在順序很重要的情況下很有用,但需要一個獨立條件來決定是否啟用某個項目。例如
plugins: [
'one',
['two', false],
'three',
],
overrides: [{
test: "./src",
plugins: [
'two',
]
}]
會對 src
中的檔案啟用 two
外掛,但 two
仍會在 one
和 three
之間執行。
名稱正規化
預設情況下,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" |