# 参数

  • 主要参数
  • 配置加载选项
  • 插件和预设配置
  • 配置合并选项
  • 源映射选项
  • 杂项选项
  • 代码生成器选项
  • AMD / UMD / SystemJS 选项
  • 期权概念

参数可以通过多种方式 传递给 Babel。当直接传递给 Babel 时, 你可以只传递参数对象。当 Babel is used via a wrapper, it may also be necessary, or at least more useful, to pass the options via configuration files .

如果通过 @babel/cli传递参数时,你需要将参数名按照 kebab-case(短横线连接)方式做转换。例如:

npx babel --root-mode upward file.js # 等价于 rootMode 参数

# 主要参数 (opens new window)

以下这些参数仅在以编程方式调用 Babel 时使用,因此, 以下这些参数主要被用于第三方工具或者用户直接调用 babel.transform函数时。对于使用集成 Babel 工具的用户,例如 babel-loader@babel/register ,不会用到以下这些参数的。

# cwd (opens new window)

类型: string默认值: process.cwd()

当前工作目录。所有以编程方式传递进来的路径都 相对于当前工作目录开始解析。

# caller (opens new window)

类型: 具有如下类型的对象

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 (opens new window)

类型: string

需要编译的源码文件的文件名(可以没有)。 filename 参数是可选的,但是当文件名未知时,并不是所有的 Babel 功能都可用, 因为某些参数依赖 filename 参数 来实现其功能。

用户可能遇到的三种主要情况是:

  • 文件名暴露给插件。* 一些插件可能需要文件名。
  • "test""exclude" (opens new window) 和等选项"ignore" (opens new window) 需要字符串/正则表达式匹配的文件名。
  • .babelrc.json.babelrc文件相对于正在编译的文件加载。如果省略此选项,Babel 将像babelrc: false已设置一样运行。

# filenameRelative (opens new window)

类型:string默认:(path.relative(opts.cwd, opts.filename)如果"filename" (opens new window) 通过)

用作 BabelsourceFileName选项的默认值,并用作 AMD / UMD / SystemJS 模块转换的文件名生成的一部分。

# code (opens new window)

类型: boolean默认值: true

Babel 的默认返回值包括生成代码的属性code。在对 Babel 进行多次调用的某些情况下,禁用代码生成并改为直接获取 AST 以避免做不必要的工作map会很有帮助。ast: true

# ast (opens new window)

类型:boolean默认:false

Babel 的默认设置是生成一个字符串和一个 sourcemap,但在某些情况下,获取 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 (opens new window)

类型:boolean默认:true添加于v7.11.0

默认情况下babel.transformFromAst将克隆输入 AST 以避免突变。cloneInputAst: false如果输入 AST 未在别处使用,则指定可以提高解析性能。

# 配置加载选项 (opens new window)

加载配置可能会有点复杂,因为环境可以有多种类型的配置文件,而这些配置文件可以有各种嵌套的配置对象,这些对象根据配置应用。

# root (opens new window)

类型:string默认:opts.cwd放置:仅在 Babel 的编程选项中允许

将根据"rootMode" (opens new window) 确定当前 Babel 项目的概念根文件夹进行处理的初始路径。这用于两种主要情况:

  • "configFile" 检查默认值时的基本目录
  • 的默认值* "babelrcRoots"

# rootMode (opens new window)

类型:"root" | "upward" | "upward-optional"默认:"root"放置:仅允许在 Babel 的编程选项中添加:v7.1.0

这个选项,结合"root" (opens new window) 值,定义了 Babel 如何选择它的项目根目录。不同的模式定义了 Babel 可以处理"root" (opens new window) 值以获得最终项目根的不同方式。

注意:babel.config.json从 Babel 7.8.0 开始支持。在旧的 Babel 7 版本中,仅babel.config.js支持。

"root"``babel.config.json是默认模式,因为它避免了 Babel 意外加载完全在当前项目文件夹之外的风险。如果你使用"upward-optional",请注意它会沿着目录结构一直走到文件系统根目录,并且总是有可能有人会忘记babel.config.json在他们的主目录中,这可能会导致你的构建出现意外错误。

具有基于每个包运行构建/测试的 monorepo 项目结构的用户可能很想使用,"upward"因为 monorepos 通常babel.config.json (opens new window) 在项目根目录中有一个。在没有 的 monorepo 子目录中运行 Babel "upward",将导致 Babel 跳过加载babel.config.json (opens new window) 项目根目录中的任何文件,这可能导致意外错误和编译失败。

# envName (opens new window)

类型:string默认:process.env.BABEL_ENV || process.env.NODE_ENV || "development"放置:仅在 Babel 的编程选项中允许

配置加载期间使用的当前活动环境。该值在解析配置时用作键"env" (opens new window) ,也可通过 api.env() 函数在配置函数、插件和预设中使用。

# configFile (opens new window)

类型:string | boolean默认:path.resolve(opts.root, "babel.config.json")如果存在,false否则放置:只允许在 Babel 的编程选项中使用

默认搜索默认babel.config.json文件,但可以传递任何 JS 或 JSON5 配置文件的路径。

注意:此选项不会影响文件的加载.babelrc.json (opens new window) ,因此虽然很想这样做configFile: "./foo/.babelrc.json",但不推荐这样做。如果给定的.babelrc.json (opens new window) 是通过标准文件相关逻辑加载的,您最终将加载相同的配置文件两次,并将其与自身合并。如果您要链接特定的配置文件,建议坚持使用独立于“babelrc”名称的命名方案。

# babelrc (opens new window)

类型:boolean默认:true只要filename指定了选项放置:允许在 Babel 的编程选项中,或在加载的"configFile" (opens new window) . 一个编程选项将覆盖一个配置文件。

true将启用搜索相对于提供给 Babel 的配置文件 (opens new window) "filename"

babelrc在编程选项中传递的值将覆盖配置文件中的一组值。

注意:.babelrc.json仅当当前文件"filename" (opens new window) 位于与其中一个"babelrcRoots" (opens new window) 包匹配的包内时,才会加载文件。

# babelrcRoots (opens new window)

类型:boolean | MatchPattern | Array<MatchPattern>默认:opts.root放置:允许在 Babel 的编程选项中,或在加载的configFile. 一个编程选项将覆盖一个配置文件。

默认情况下,Babel 只会在包内搜索.babelrc.json文件"root" (opens new window) ,否则 Babel 无法知道给定的文件是否.babelrc.json要加载,或者它是否"plugins" (opens new window) 已经"presets" (opens new window) 安装,因为正在编译的文件可能在里面node_modules,或者已经符号链接到项目。

此选项允许用户提供在考虑是否加载.babelrc.json文件时应被视为“根”包的其他包列表。

例如,希望允许单个包拥有自己的配置的 monorepo 设置可能想要做

JavaScript

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

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

# 插件和预设选项 (opens new window)

# plugins (opens new window)

类型:Array<PluginEntry | Plugin>( PluginEntry )默认值:[]

处理此文件时要激活的一组插件。有关各个条目如何交互的更多信息,尤其是在跨多个嵌套"env" (opens new window)"overrides" 配置使用时,请参阅合并 (opens new window)

注意:该选项还允许Plugin来自 Babel 本身的实例,但不建议直接使用这些实例。如果您需要创建插件或预设的永久表示,您应该使用babel.createConfigItem() (opens new window) .

# presets (opens new window)

类型:Array<PresetEntry>( PresetEntry )默认值:[]

处理此文件时要激活的一组预设。有关各个条目如何交互的更多信息,尤其是在跨多个嵌套"env" (opens new window)"overrides" 配置使用时,请参阅合并 (opens new window)

注意:预设的格式与插件相同,除了名称规范化需要“preset-”而不是“plugin-”,并且预设不能是Plugin.

# passPerPreset (opens new window)

类型:boolean默认:false状态:已弃用

指示 Babel 将数组中的每个预设presets作为一个独立的通道运行。此选项往往会在插件的确切顺序方面引起很多混乱,但如果您绝对需要在独立编译过程中运行一组操作,则此选项很有用。

注意:这个选项可能会在未来的 Babel 版本中被删除,因为我们添加了对定义插件之间顺序的更好支持。

# 输出目标 (opens new window)

# targets (opens new window)

类型:string | Array<string> | { [string]: string }默认:{}放置:允许在 Babel 的编程选项中,或在配置文件中添加:v7.13.0

历史| | | | :--- | :--- | | | | | | |

描述您为项目支持/定位的环境。

这可以是浏览器列表兼容的 (opens new window) 查询(有警告 (opens new window) ):

babel.config.json

{
  "targets": "> 0.25%, not dead"
}

或支持的最低环境版本的对象:

babel.config.json

{
  "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。

# 没有目标 (opens new window)

当没有指定目标时:Babel 会假设你的目标是最旧的浏览器。例如,@babel/preset-env将所有 ES2015-ES2020 代码转换为 ES5 兼容。

我们建议设置targets以减少输出代码大小。

babel.config.json

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

因此,Babel 的行为与browserslist (opens new window) 不同:当在您的 Babel或browserslist 配置中找不到目标时,它不会使用查询。如果要使用查询,则需要将其作为目标显式传递:defaults``defaults

babel.config.json

{
  "targets": "defaults"
}

我们认识到这并不理想,并将在 Babel v8 中重新审视这一点。

# targets.esmodules (opens new window)

类型:boolean

您还可以针对支持 ES 模块的浏览器 ( https://www.ecma-international.org/ecma-262/6.0/#sec-modules )。指定目标后esmodules,它将与browsers目标和browserslist的目标相交。您可以结合使用此方法以<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 (opens new window)

类型:string | "current" | true.

如果要针对当前节点版本进行编译,可以指定"node": trueor "node": "current",这与"node": process.versions.node.

或者,您可以在 browserslist 查询中指定节点版本:

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 (opens new window)

类型:string | "tp".

如果要针对Safari 的技术预览 (opens new window) 版进行编译,可以指定"safari": "tp".

# targets.browsers (opens new window)

类型:string | Array<string>.

使用browserslist 选择浏览器的查询(例如:最近 2 个版本,> 5%,safari tp)。

请注意,浏览器的结果会被来自targets.

# targets.deno (opens new window)

类型:string.

支持的最低版本为 1.0。

babel.config.json

{
  "targets": {
    "deno": "1.9"
  }
}

# browserslistConfigFile (opens new window)

类型:boolean默认:true放置:允许在 Babel 的编程选项中,或在配置文件中添加:v7.13.0

切换是否使用browserslist 配置源 (opens new window) ,包括搜索任何 browserslist 文件或引用 package.json 中的 browserslist 键。这对于使用 browserslist 配置文件的项目很有用,这些文件不会用 Babel 编译。

如果指定了字符串,则它必须表示浏览器列表配置文件的路径。相对路径是相对于指定此选项的配置文件解析的,或者是相对于cwd它作为编程选项的一部分传递的。

# browserslistEnv (opens new window)

类型:string默认:undefined放置:允许在 Babel 的编程选项中,或在配置文件中添加:v7.13.0

要使用的Browserslist环境

# 配置合并选项 (opens new window)

# extends (opens new window)

类型:string放置:不允许在预设内部

配置可以“扩展”其他配置文件。当前配置中的配置字段将合并 (opens new window) 到扩展文件的配置之上。

# env (opens new window)

类型:{ [envKey: string]: Options }放置:不能嵌套在另一个env块内。

允许整个嵌套的配置选项,只有在envKey匹配envName选项时才会启用。

注意:envenvKey]选项将[合并 到根对象中指定的选项之上。

# overrides (opens new window)

类型:Array<Options>放置:不得嵌套在另一个overrides对象或env块内。

允许用户提供一系列选项,这些选项一次一个地合并到当前配置中。 (opens new window) 此功能最好与"test" (opens new window) / "include" /"exclude" (opens new window) 选项一起使用,以提供覆盖应适用的条件。例如:

JavaScript

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

可用于compact为一个已知较大且缩小的特定文件启用该选项,并告诉 Babel 不要费心尝试很好地打印该文件。

# test (opens new window)

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

如果所有模式都不匹配,则当前配置对象被认为是不活动的,并在配置处理期间被忽略。此选项在选项对象中使用时最有用overrides,但在任何地方都允许使用。

注意:这些切换不会影响前面部分中的编程和配置加载选项,因为在准备合并的配置之前很久就考虑了它们。

# include (opens new window)

类型:MatchPattern | Array<MatchPattern>( )MatchPattern (opens new window)

此选项是 的同义词"test" (opens new window)

# exclude (opens new window)

类型:MatchPattern | Array<MatchPattern>( )MatchPattern (opens new window)

如果任何模式匹配,则当前配置对象被认为是不活动的,并在配置处理期间被忽略。此选项在选项对象中使用时最有用overrides,但在任何地方都允许使用。

注意:这些切换不会影响前面部分中的编程和配置加载选项,因为在准备合并的配置之前很久就考虑了它们。

# ignore (opens new window)

类型:( Array<MatchPattern>)MatchPattern (opens new window) 放置:不允许在预设内部

如果任何模式匹配,Babel 将立即停止当前构建的所有处理。例如,用户可能想做类似的事情

JavaScript

ignore: ["./lib"];

明确禁用目录内文件的 Babel 编译lib

注意:此选项禁用文件的所有Babel 处理。虽然这有它的用途,但也值得考虑将该"exclude" (opens new window) 选项作为一种不太激进的选择。

# only (opens new window)

类型:( Array<MatchPattern>)MatchPattern (opens new window) 放置:不允许在预设内部

如果所有模式都不匹配,Babel 将立即停止当前构建的所有处理。例如,用户可能想做类似的事情

JavaScript

only: ["./src"];

明确启用src目录内文件的 Babel 编译,同时禁用其他所有内容。

注意:此选项禁用文件的所有Babel 处理。虽然这有它的用途,但也值得将"test" (opens new window) /"include" (opens new window) 选项作为一种不太激进的选择。

# 源映射选项 (opens new window)

# inputSourceMap (opens new window)

类型:boolean | SourceMap默认:true

true将尝试从文件本身加载输入源图,如果它包含注释//# sourceMappingURL=...。如果没有找到地图,或者地图无法加载和解析,它将被静默丢弃。

如果提供了对象,它将被视为源映射对象本身。

# sourceMaps (opens new window)

类型:boolean | "inline" | "both"默认:false

  • true为代码生成 sourcemap 并将其包含在结果对象中。
  • "inline"生成 sourcemap 并将其作为数据 URL 附加到代码末尾,但不将其包含在结果对象中。
  • "both"与内联相同,但会将地图包含在结果对象中。

@babel/cli重载其中一些也会影响地图写入磁盘的方式:

  • true将映射写入.map磁盘上的文件
  • "inline"将直接写入文件,所以它会有一个data:包含地图
  • "both"将使用data:URL和..map

true注意:这些选项有点奇怪,因此根据您的用例,在您自己的代码中使用和处理其余选项可能是最有意义的 。

# sourceMap (opens new window)

这是 的同义词sourceMapssourceMaps推荐使用。

# sourceFileName (opens new window)

类型:string默认值:path.basename(opts.filenameRelative)可用时,或"unknown"

用于源映射对象内文件的名称。

# sourceRoot (opens new window)

类型:string

sourceRoot如果需要,要在生成的源映射中设置的字段。

#项选项 (opens new window)

# sourceType (opens new window)

类型:"script" | "module" | "unambiguous"默认:“模块”

  • "script"- 使用 ECMAScript 脚本语法解析文件。不允许import/export语句,并且文件不处于严格模式。
  • "module"- 使用 ECMAScript 模块语法解析文件。文件是自动严格的,并且import/export语句是允许的。
  • "unambiguous"``import- 如果存在/语句,则将文件视为“模块” export,否则将其视为“脚本”。

unambiguous在类型未知的上下文中可能非常有用,但它可能导致错误匹配,因为拥有一个不使用 /import语句的模块文件是完全有效的export

此选项很重要,因为当前文件的类型会影响输入文件的解析,以及可能希望添加 import/require使用到当前文件的某些转换。

例如,@babel/plugin-transform-runtime (opens new window) 依赖于当前文档的类型来决定是插入一个import声明,还是一个require()调用。 @babel/preset-env 也为其 "useBuiltIns" 选项做同样的事情。由于 Babel 默认将文件视为 ES 模块,因此通常这些插件/预设会插入import语句。设置正确sourceType可能很重要,因为错误的类型会导致 Babel 将import语句插入本应是 CommonJS 文件的文件中。node_modules这在执行依赖项 编译的项目中尤其重要,因为插入import语句会导致 Webpack 和其他工具将文件视为 ES 模块,从而破坏本来是功能性的 CommonJS 文件。

注意:此选项不会影响.mjs文件的解析,因为它们目前被硬编码为始终作为"module"文件解析。

# assumptions (opens new window)

类型:{ [assumption: string]: boolean }默认:{}添加于:v7.13.0放置:允许在编程选项、配置文件和预设中。

设置 Babel 可以做出的假设以产生更小的输出:

babel.config.json

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

有关更多信息,请查看假设 (opens new window) 文档页面。

# highlightCode (opens new window)

类型:boolean默认:true

突出显示 Babel 错误消息中代码片段中的标记,使它们更易于阅读。

# wrapPluginVisitorMethod (opens new window)

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

允许用户在每个访问者上添加一个包装器,以便在 Babel 执行插件时检查访问者进程。

  • key是一个简单的不透明字符串,表示正在执行的插件。
  • nodeType是当前访问的 AST 节点的类型。
  • fn是访问者函数本身。

用户可以返回一个替换函数,该函数应该在执行他们希望执行的任何日志记录和分析后调用原始函数。

# parserOpts (opens new window)

类型:{}

一个不透明的对象,包含传递给正在使用的解析器的选项。

有关可用的解析器选项,请参阅解析器选项 (opens new window)

# generatorOpts (opens new window)

类型:{}

一个不透明的对象,包含传递给正在使用的代码生成器的选项。有关最常用的选项,请参阅代码生成器选项。 (opens new window)

# 代码生成器选项 (opens new window)

# retainLines (opens new window)

类型:boolean默认:false

Babel 将努力生成代码,使项目打印在与原始文件相同的行上。这个选项的存在是为了让不能使用 source maps 的用户可以获得模糊有用的错误行号,但这只是尽力而为,并不能保证在所有情况下都能使用所有插件。

# compact (opens new window)

类型:boolean | "auto"默认:"auto"

“自动”将通过评估来设置值code.length > 500_000

在紧凑模式下生成代码时,将省略所有可选的换行符和空格。

# minified (opens new window)

类型:boolean默认:false

Includes compact: true,省略块结束分号,尽可能省略()from ,并可能输出较短的文字版本。new Foo()

# auxiliaryCommentBefore (opens new window)

类型:string

允许指定前缀注释插入到原始文件中不存在的代码片段之前。

注意:原始文件中存在和不存在的定义可能会有点难看,因此不建议使用此选项。如果你需要以某种方式注释代码,最好使用 Babel 插件。

# auxiliaryCommentAfter (opens new window)

类型:string

允许指定前缀注释插入原始文件中不存在的代码段之后。

注意:原始文件中存在和不存在的定义可能会有点难看,因此不建议使用此选项。如果你需要以某种方式注释代码,最好使用 Babel 插件。

# comments (opens new window)

类型:boolean默认:true

shouldPrintComment如果没有给出函数,则提供默认注释状态。有关详细信息,请参阅该选项的默认值。

# shouldPrintComment (opens new window)

类型:(value: string) => boolean默认无minified(val) => opts.comments || /@license|@preserve/.test(val)默认有minified() => opts.comments

一个函数,可以决定给定的注释是否应该包含在 Babel 的输出代码中。

# 高级用法 (opens new window)

有关更多代码生成器选项,请参阅生成器选项 (opens new window)

# AMD / UMD / SystemJS 模块选项 (opens new window)

# moduleIds (opens new window)

类型:boolean默认:!!opts.moduleId

启用模块 ID 生成。

# moduleId (opens new window)

类型:string

用于模块的硬编码 ID。不能与 一起使用getModuleId

# getModuleId (opens new window)

类型:(name: string) => string

给定 babel 生成的模块名称,返回要使用的名称。返回一个假值将使用原来的name.

# moduleRoot (opens new window)

类型:string

包含在生成的模块名称中的根路径。

# 期权概念 (opens new window)

# MatchPattern (opens new window)

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

几个 Babel 选项针对文件路径执行测试。通常,这些选项支持一种通用模式方法,其中每个模式都可以

  • string- 具有简单支持***完整 slug 匹配的文件路径。与模式匹配的任何文件或父文件夹都算作匹配项。路径遵循 Node 的正常路径逻辑,因此在 POSIX 上必须是/-separated,但在 Windows 上两者/\受支持。
  • RegExp- 与规范化文件名匹配的正则表达式。在 POSIX 上,路径 RegExp 将针对/-separated 路径运行,而在 Windows 上,它将在\-separated 路径上。

重要的是,如果使用其中任何一个,Babel 要求该filename选项存在,否则将认为它是一个错误。

  • (filename: string | void, context: { caller: { name: string } | void, envName: string, dirname: string }) => boolean是一个通用回调,应该返回一个布尔值以指示它是否匹配。该函数传递文件名,或者undefined如果没有给 Babel。它还传递了 currentenvNamecalleroptions,这些选项是由对 Babel 的顶级调用指定的,并且dirname是配置文件的目录或当前工作目录(如果以编程方式调用转换)。

# 合并

请参考Babel 如何合并配置项 (opens new window)

# 插件/预设条目 (opens new window)

# PluginEntry/ PresetEntry (opens new window)

单个插件/预设项可以有几种不同的结构:

  • EntryTarget- 个人插件
  • [EntryTarget, EntryOptions]- 带选项的个人插件
  • [EntryTarget, EntryOptions, string]- 带有选项和名称的独立插件(有关名称的更多信息,请参阅合并) (opens new window)
  • 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 (opens new window)

类型:string | {} | Function

插件/预设目标可以来自几个不同的来源:

# EntryOptions (opens new window)

类型:undefined | {} | false

选项在执行时传递给每个插件/预设。undefined将被规范化为一个空对象。

false表示条目被完全禁用。这在顺序很重要的上下文中很有用,但需要一个单独的条件来决定是否启用某些内容。例如:

JavaScript

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

将为two中的文件启用插件src,但two仍会在one和之间执行three

# 名称规范化 (opens new window)

默认情况下,Babel 期望插件的名称中有一个babel-plugin-或前缀。babel-preset-为了避免重复,Babel 有一个名称规范化阶段,会在加载项目时自动添加这些前缀。这归结为一些主要规则:

  • 绝对路径原封不动地通过。
  • 以* ./pass through 开头的相对路径保持不变。
  • 对包* 内* 文件的引用保持不变。
  • 任何前缀为 的标识符都* module:将删除前缀,但其他方面保持不变。
  • plugin-/将被注入任何没有它作为前缀的 -scoped 包preset-的开头。@babel
  • babel-plugin-/babel-preset-将作为前缀注入任何没有它作为前缀的无范围包。
  • babel-plugin-/babel-preset-将作为前缀注入任何@-scoped 包,它们的名称中没有任何地方。
  • babel-plugin/babel-preset将作为包名称注入,如果只@给出 -scope 名称。

以下是在插件上下文中应用时的一些示例:

输入 归一化
"/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"
Last Updated: 6/14/2023, 8:56:23 AM