升级到 Babel 8
当用户从 Babel 7 升级到 Babel 8 时,请参考本文档。如果你是插件开发者或集成开发者,还请查看 集成迁移指南。
¥Refer users to this document when upgrading to Babel 8 from Babel 7. If you are a plugin developer or integration developer, please also check migration guide for integration.
如果你是从 Babel 6 升级,请查看 此处 的 Babel 7 迁移指南。
¥If you are upgrading from Babel 6, please check here for Babel 7 migration guide.
Babel
Node.js 支持
¥Node.js support
所有 Babel 8 软件包都需要 Node.js ^20.19.0 || >=22.12.0
。
¥All Babel 8 packages require Node.js ^20.19.0 || >=22.12.0
.
我们强烈建议你使用较新版本的 Node.js (LTS v22),因为之前的版本已不再维护。有关详细信息,请参阅 nodejs/Release。
¥We highly encourage you to use a newer version of Node.js (LTS v22) since the previous versions are not maintained. See nodejs/Release for more information.
这只是意味着 Babel 本身不会在旧版本的 Node.js 上运行。它仍然可以输出在旧 Node 版本上运行的代码。
¥This just means Babel itself won't run on older versions of Node. It can still output code that runs on old Node versions.
仅限 ESM
¥ESM only
Babel 现在以原生 ECMAScript 模块的形式提供。(#11701)
¥Babel is now shipped in native ECMAScript modules. (#11701)
@babel/core
要求
¥@babel/core
requirements
所有预设和插件都需要 @babel/core@^8.0.0
作为对等依赖。
¥All presets and plugins require @babel/core@^8.0.0
as peer dependency.
@babel/eslint-parser
和 @babel/eslint-plugin
¥@babel/eslint-parser
and @babel/eslint-plugin
解析器和插件需要 eslint@^8.9.0
作为对等依赖。(#15563)
¥The parser and plugin require eslint@^8.9.0
as peer dependency. (#15563)
包重命名
¥Package Renames
以下软件包已重命名为 -transform
,因为它们已达到第 4 阶段 (#15614)。Babel 7.22 中已引入重命名过程,因此你可以在升级之前开始迁移。
¥The following packages has been renamed to -transform
as they have reached Stage 4 (#15614). The rename process has been landed in Babel 7.22 so you can start the migration prior to the upgrade.
Babel 7 | Babel 8 |
---|---|
@babel/plugin-proposal-async-generator-functions | @babel/plugin-transform-async-generator-functions |
@babel/plugin-proposal-class-properties | @babel/plugin-transform-class-properties |
@babel/plugin-proposal-class-static-block | @babel/plugin-transform-class-static-block |
@babel/plugin-proposal-duplicate-named-capturing-groups-regex | @babel/plugin-transform-duplicate-named-capturing-groups-regex |
@babel/plugin-proposal-dynamic-import | @babel/plugin-transform-dynamic-import |
@babel/plugin-proposal-export-namespace-from | @babel/plugin-transform-export-namespace-from |
@babel/plugin-proposal-json-strings | @babel/plugin-transform-json-strings |
@babel/plugin-proposal-logical-assignment-operators | @babel/plugin-transform-logical-assignment-operators |
@babel/plugin-proposal-nullish-coalescing-operator | @babel/plugin-transform-nullish-coalescing-operator |
@babel/plugin-proposal-numeric-separator | @babel/plugin-transform-numeric-separator |
@babel/plugin-proposal-object-rest-spread | @babel/plugin-transform-object-rest-spread |
@babel/plugin-proposal-optional-catch-binding | @babel/plugin-transform-optional-catch-binding |
@babel/plugin-proposal-optional-chaining | @babel/plugin-transform-optional-chaining |
@babel/plugin-proposal-private-methods | @babel/plugin-transform-private-methods |
@babel/plugin-proposal-private-property-in-object | @babel/plugin-transform-private-property-in-object |
@babel/plugin-proposal-unicode-property-regex | @babel/plugin-transform-unicode-property-regex |
包已停止使用
¥Package Discontinued
@babel/runtime-corejs2
请升级到 @babel/runtime-corejs3
(#11751)。安装新的运行时后,请将 corejs
版本 设置为 3。
¥Please upgrade to @babel/runtime-corejs3
(#11751). After
you install the new runtime, please set the corejs
version to 3.
{
"plugins": ["@babel/transform-runtime", {
- corejs: 2
+ corejs: 3
}]
}
@babel/plugin-syntax-import-assertions
该提案演变为 导入属性,现在 Babel 默认支持解析。你可以从配置中删除 @babel/plugin-syntax-import-assertions
,并在代码库中替换以下模式:
¥The proposal evolved into import attributes, which now Babel supports parsing by default. You can remove @babel/plugin-syntax-import-assertions
from your config, and replace the following patterns in your codebase:
- import value from "module" assert { type: "json" };
+ import value from "module" with { type: "json" };
语法插件
¥Syntax plugins
不再需要以下语法插件,你可以安全地将它们从配置和节点模块中删除:
¥The following syntax plugins are no longer needed, you can safely remove them from your config and node modules:
-
@babel/plugin-syntax-async-functions
-
@babel/plugin-syntax-async-generators
-
@babel/plugin-syntax-bigint
-
@babel/plugin-syntax-class-properties
-
@babel/plugin-syntax-class-static-block
-
@babel/plugin-syntax-dynamic-import
-
@babel/plugin-syntax-exponentiation-operator
-
@babel/plugin-syntax-export-extensions
-
@babel/plugin-syntax-export-namespace-from
-
@babel/plugin-syntax-import-meta
-
@babel/plugin-syntax-json-strings
-
@babel/plugin-syntax-logical-assignment-operators
-
@babel/plugin-syntax-module-string-names
-
@babel/plugin-syntax-nullish-coalescing-operator
-
@babel/plugin-syntax-numeric-separator
-
@babel/plugin-syntax-object-rest-spread
-
@babel/plugin-syntax-optional-catch-binding
-
@babel/plugin-syntax-optional-chaining
-
@babel/plugin-syntax-private-property-in-object
-
@babel/plugin-syntax-top-level-await
-
@babel/plugin-syntax-trailing-function-commas
-
@babel/plugin-syntax-unicode-sets-regex
以下插件已停用,其功能不再可用:
¥The following plugins are discontinued and their functionality is not available anymore:
-
@babel/plugin-syntax-import-assertions
。改用@babel/plugin-syntax-import-attributes
,并参阅@babel/parser
部分了解更多信息。¥
@babel/plugin-syntax-import-assertions
. Use@babel/plugin-syntax-import-attributes
instead, and see the@babel/parser
section for more information.
配置变更
¥Configuration Changes
@babel/core
-
根 AMD/UMD/SystemJS 选项,即
moduleIds
、getModuleId
、moduleRoot
、moduleId
和filenameRelative
已移至插件选项(#5473、#12724)。¥The root AMD/UMD/SystemJS options, namely
moduleIds
,getModuleId
,moduleRoot
,moduleId
andfilenameRelative
are moved to plugin options (#5473, #12724).迁移:将这些选项移至模块插件,例如,如果你使用的是
@babel/plugin-transform-modules-systemjs
:¥Migration: Move these options to the module plugin, for example, if you are using
@babel/plugin-transform-modules-systemjs
:babel.config.jsmodule.exports = {
plugins: [
['@babel/plugin-transform-modules-systemjs', {
moduleIds: true,
moduleRoot: 'myApp',
getModuleId (name) {
return name + "suffix";
},
}],
],
};如果你使用的是
@babel/plugin-transform-modules-amd
或@babel/plugin-transform-modules-umd
,请修改上面的示例。你可以在 Babel 8.0 之前开始迁移。¥Adapt the example above if you are using
@babel/plugin-transform-modules-amd
or@babel/plugin-transform-modules-umd
. You can start the migration prior to Babel 8.0.如果你使用
@babel/cli
并从命令行传递--module-ids
、--module-root
和--module-id
,请创建 Babel 配置babel.config.js
并在其中指定选项。¥If you are using
@babel/cli
and passing--module-ids
,--module-root
and--module-id
from command line, please create a Babel configbabel.config.js
and specify options there.
@babel/preset-env
-
loose
和spec
选项已被删除 (#16043)¥The
loose
andspec
options have been removed (#16043)迁移:你可以改用
assumptions
顶层选项。请参阅 "从 @babel/preset-env 迁移"loose"and"spec"modes" 了解可立即复制的等效配置。¥Migration: You can use the
assumptions
top-level option instead. See "Migrating from @babel/preset-env's "loose" and "spec" modes" for the ready-to-copy equivalent configuration.
-
includes
和excludes
尊重重命名的包名称 (#15576)¥
includes
andexcludes
respect renamed package names (#15576)迁移:如果
includes
或excludes
包含 包重命名部分 中提到的任何插件,请将其更改为新名称。例如,¥Migration: If
includes
orexcludes
contain any plugins mentioned in the Packages Renames section, change it to the new name. For example,babel.config.json{
"presets": [[
"@babel/preset-env",
{
- "includes": ["proposal-optional-chaining"]
+ "includes": ["transform-optional-chaining"]
}
]]
}
-
删除
uglify
目标 (#12594)¥Remove
uglify
target (#12594)迁移:
uglify
目标自 7.0.0 起已被弃用,如果你仍然需要它,请使用forceAllTransforms
选项。¥Migration: The
uglify
target had been deprecated since 7.0.0, if you still need this, use theforceAllTransforms
option. -
删除的语法插件不能在
includes
和excludes
(#15810)中使用¥Removed syntax plugins can not be used in
includes
andexcludes
(#15810)迁移:如果你使用
includes
和excludes
选项中的任何 上面列出的语法插件,则可以安全地删除它们。¥Migration: You can safely remove them if you are using any of syntax plugins listed above in the
includes
andexcludes
options.
@babel/preset-react
-
将
development
选项设置为配置的环境 (#16927) 的默认设置。¥Make the
development
option default to the configured env (#16927)请注意,通过
envName
选项 设置的 Babel 环境默认为process.env.BABEL_ENV || process.env.NODE_ENV || "development"
:如果你未指定envName
选项,也未指定BABEL_ENV
或NODE_ENV
环境变量,则默认为development
。¥Note that Babel's env, set through
envName
option, defaults toprocess.env.BABEL_ENV || process.env.NODE_ENV || "development"
: if you don't specify neither theenvName
option nor theBABEL_ENV
orNODE_ENV
environment variables, it will default todevelopment
.迁移:在生产版本中,将
BABEL_ENV
或NODE_ENV
环境变量(或envName
Babel 选项)设置为"production"
。如果你只想在生产模式下运行此预设,则可以将development
选项明确设置为false
。¥Migration: In production builds, set the
BABEL_ENV
orNODE_ENV
environment variables, or theenvName
Babel option, to"production"
. If you want to run only this preset in production mode, then you can explicitly set thedevelopment
option tofalse
.
-
删除
useSpread
和useBuiltIns
选项 (#12593)¥Remove
useSpread
anduseBuiltIns
options (#12593)迁移:Babel 8 总是将 JSX spread 元素编译为 object spread:
¥Migration: Babel 8 always compiles JSX spread elements to object spread:
input.jsx<div {...props}></div>
// transforms to
jsx("div", { ...props })如果你的应用面向 2019 年之后发布的现代浏览器,你可以安全地删除这些选项,因为对象传播的代码占用量更少。
¥If your app targets to modern browsers released after 2019, you can safely remove these options as object spread has less code footprint.
如果你的代码需要在不支持对象传播的环境中运行,你可以使用
@babel/preset-env
(推荐)或@babel/plugin-transform-object-rest-spread
。如果你想向下转译Object.assign
,你还需要启用@babel/plugin-transform-object-assign
。在 Babel 7.7.0 中,你可以使用useSpread
选项来选择此行为。¥If your code needs to run in an environment which doesn't support object spread, you can either use
@babel/preset-env
(recommended) or@babel/plugin-transform-object-rest-spread
. If you want to transpileObject.assign
down, you also need to enable@babel/plugin-transform-object-assign
. In Babel 7.7.0, you can opt-in this behavior by using theuseSpread
option. -
targets.esmodules: true
选项现在的行为与targets.esmodules: "intersect"
(#17188)相同。¥
targets.esmodules: true
option now behaves as same astargets.esmodules: "intersect"
(#17188)迁移:在 Babel 7 中,指定
esmodules: true
将覆盖browsers
目标或browserslist
的目标,而指定"intersect"
将与这些目标相交。¥Migration: In Babel 7, specifying
esmodules: true
will override thebrowsers
target orbrowserslist
's targets, while specifying"intersect"
will intersect with such targets.如果你的应用针对 2019 年之后发布的现代浏览器,你可以安全地删除
esmodules
选项,因为它们都支持 ES 模块。¥If your app targets modern browsers released after 2019, you can safely remove the
esmodules
option as they all support ES modules.如果你的应用针对 IE 等旧版浏览器,你也可以删除
esmodules
选项,因为 IE 比任何其他浏览器都需要更多的转换。¥If your app targets legacy browsers such as IE, you can also remove the
esmodules
option as IE requires more transforms than any other browser.如果你的应用针对 2019 年之前发布的浏览器,并且你希望保留 Babel 7
esmodules: true
行为,请删除esmodules
选项并设置以下browsers
目标:¥If your app targets browsers released before 2019 and you want to preserve the Babel 7
esmodules: true
behavior, remove theesmodules
option and set the followingbrowsers
target:babel.config.json[
"@babel/preset-env",
{
"targets": {
"browsers": "chrome 61, firefox 60, safari 10.1, node 13.2"
}
}
] -
类型检查输入选项 (#12460)
¥Type check input options (#12460)
迁移:该预设还将报告无效的选项名称。请参阅 docs 并确保有效使用。
¥Migration: The preset will also report invalid option names. Refer to the docs and ensure valid usage.
-
在自动运行时禁止
filter
选项 (#15068)¥Disallow
filter
option in automatic runtime (#15068)迁移:
filter
选项只能与classic
运行时一起使用。如果你已切换到automatic
运行时,则可以安全地删除此选项。否则请指定runtime: "classic"
。¥Migration: The
filter
option can only be used with theclassic
runtime. If you have switched toautomatic
runtime, you can safely remove this option. Otherwise please specifyruntime: "classic"
.
@babel/preset-typescript
-
删除
isTSX
和allExtensions
选项 (#14955)¥Remove
isTSX
andallExtensions
options (#14955)迁移:
¥Migration:
-
isTSX: true
和allExtensions: true
¥
isTSX: true
andallExtensions: true
如果你已经在使用
@babel/preset-react
、@babel/plugin-transform-react-jsx
或任何其他第三方 jsx 预设(例如@vue/babel-preset-jsx
),并且想要转译.tsx
文件,则可以安全地删除这两个选项。Babel 8 将使用此预设和其他 JSX 插件自动处理.tsx
文件。¥If you are already using
@babel/preset-react
,@babel/plugin-transform-react-jsx
or any other third-party jsx presets such as@vue/babel-preset-jsx
, and you want to transpile.tsx
files, you can safely remove these two options. Babel 8 will automatically handle.tsx
files using this preset and the other JSX plugin.babel.config.json{
"presets": [
["@babel/preset-react", { "runtime": "automatic" }],
- ["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }]
+ ["@babel/preset-typescript"]
]
}如果要转译
.tsx
以外的文件,例如.vue
,请使用ignoreExtensions: true
:¥If you want to transpile files other than
.tsx
, such as.vue
, useignoreExtensions: true
:babel.config.js{
overrides: [{
include: /\.vue$/,
presets: [
['@babel/preset-typescript', {
- allExtensions: true, isTSX: true
+ ignoreExtensions: true
}]
]
}]
}如果你想保留 JSX 格式但转译 TypeScript 部分,请使用
ignoreExtensions: true
并将@babel/plugin-syntax-jsx
添加到plugins
。¥If you want to preserve the JSX format but transpile the TypeScript part, use
ignoreExtensions: true
and add@babel/plugin-syntax-jsx
toplugins
. -
isTSX: false
和allExtensions: true
¥
isTSX: false
andallExtensions: true
使用
ignoreExtensions: true
,参见上面的示例。¥Use
ignoreExtensions: true
, see the example above. -
isTSX: false
和allExtensions: false
¥
isTSX: false
andallExtensions: false
你可以安全地删除它们。
¥You can safely remove them.
-
-
删除
allowDeclareFields
选项 (#12461)¥Remove
allowDeclareFields
option (#12461)迁移:从你的配置中删除该选项,因为它现在默认启用。以前,
allowDeclareFields
允许转换 TypeScript 3.7 中引入的declare
语法,在 Babel 8 中,我们支持没有此类标志的语法。另请参阅 编译更改 部分。¥Migration: Remove the option from your config, since it's now enabled by default. Previously
allowDeclareFields
enables transforming thedeclare
syntax introduced in TypeScript 3.7, in Babel 8 we support the syntax without such a flag. See also the compilation changes section. -
类型检查输入选项 (#12460)
¥Type check input options (#12460)
迁移:该预设还将报告无效的选项名称。请参阅 docs 并确保有效使用。例如,
runtime
不是有效的preset-typescript
选项,因此应删除。¥Migration: The preset will also report invalid option names. Refer to the docs and ensure valid usage. For example,
runtime
is not a validpreset-typescript
option and thus should be removed.
@babel/plugin-transform-typescript
-
删除
allowDeclareFields
选项 (#12461)¥Remove
allowDeclareFields
option (#12461)迁移:从你的配置中删除该选项。
¥Migration: Remove the option from your config.
@babel/plugin-syntax-typescript
-
删除
isTSX
选项 (#14955)¥Remove
isTSX
option (#14955)迁移:如果你使用的是
isTSX: true
,请删除此选项并将@babel/plugin-syntax-jsx
添加到plugins
:¥Migration: If you are using
isTSX: true
, remove this option and add@babel/plugin-syntax-jsx
toplugins
:{
"plugins": [
- ["@babel/plugin-syntax-typescript", { "isTSX": true }]
+ ["@babel/plugin-syntax-typescript"]
+ ["@babel/plugin-syntax-jsx"]
]
}如果你使用的是
isTSX: false
,则可以安全地删除它们。¥If you are using
isTSX: false
, you can safely remove them.
@babel/preset-flow
-
删除
allowDeclareFields
选项 (#12457)¥Remove
allowDeclareFields
option (#12457)迁移:从你的配置中删除该选项,因为它现在默认启用。之前
allowDeclareFields
允许转换 Flow 0.120.0 中引入的declare
语法,在 Babel 8 中我们支持没有这样一个标志的语法。另请参阅 编译更改 部分。¥Migration: Remove the option from your config, since it's now enabled by default. Previously
allowDeclareFields
enables transforming thedeclare
syntax introduced in Flow 0.120.0, in Babel 8 we support the syntax without such a flag. See also the compilation changes section. -
删除
enums
选项 (#16792)¥Remove
enums
option (#16792)迁移:从你的配置中删除该选项。
enums
选项用于启用 Flow 枚举,现在默认支持。¥Migration: Remove the option from your config. The
enums
option was used to enable Flow enums, which are now supported by default. -
类型检查输入选项 (#12460)
¥Type check input options (#12460)
迁移:该预设还将报告无效的选项名称。请参阅 docs 并确保有效使用。
¥Migration: The preset will also report invalid option names. Refer to the docs and ensure valid usage.
@babel/plugin-transform-flow-strip-types
-
删除
allowDeclareFields
选项 (#12457)¥Remove
allowDeclareFields
option (#12457)迁移:从你的配置中删除该选项。你可能会适应新的行为。
¥Migration: Remove the option from your config. You will probably be fine with the new behaviour.
-
删除
enums
选项 (#16792)¥Remove
enums
option (#16792)迁移:从你的配置中删除该选项。
enums
选项用于启用 Flow 枚举,现在默认支持。¥Migration: Remove the option from your config. The
enums
option was used to enable Flow enums, which are now supported by default.
@babel/parser
-
删除
estree
插件选项classFeatures
(#13752)¥Remove
estree
plugin optionclassFeatures
(#13752)迁移:从你的配置中删除该选项,因为它现在默认启用。以前,
classFeatures
插件使@babel/parser
能够生成与 ESLint 8 兼容的类属性 AST,遵循 ESTree 规范。在 Babel 8 中,eslint-parser
仅适用于 ESLint 8 及更高版本。¥Migration: Remove the option from your config, since it's now enabled by default. Previously the
classFeatures
plugin enables@babel/parser
to produce class properties AST compatible with ESLint 8, following the ESTree specification. In Babel 8 theeslint-parser
only works with ESLint 8 and above.迁移:将你的项目迁移到最新提案并从你的配置中删除插件,因为最新提案不再具有语法。
¥Migration: Migrate your project to the latest proposal and remove the plugin from your config since the latest proposal doesn't have syntax anymore.
example.js- 1.03m
+ new Decimal("1.03")
- decimal1 + decimal2
+ decimal1.add(decimal2) -
删除
importAssertions
解析器插件 (#16770)¥Remove
importAssertions
parser plugin (#16770)此插件适用于旧版本的导入属性提案,使用
assert
关键字而不是with
。提案在没有assert
关键字的情况下继续推进。¥This plugin was for an old version of the import attributes proposal, using the
assert
keyword instead ofwith
. The proposal moved ahead without theassert
keyword.迁移:用
importAttributes
替换插件。如果你仍在使用assert
关键字,建议你迁移到with
:如果无法这样做,你可以使用["importAttributes", { deprecatedAssertSyntax: true }]
选项。`¥Migration: Replace the plugin with
importAttributes
. If you are still using theassert
keyword it's recommended that you migrate towith
: if it's not possible to do so, you can use the["importAttributes", { deprecatedAssertSyntax: true }]
option.` -
删除
importReflection
解析器插件 (#16808)¥Remove
importReflection
parser plugin (#16808)"导入反射" 提案不再存在,它被 "源阶段导入" 提案取代,后者使用
source
修饰符进行导入而不是module
。¥The "import reflection" proposal does not exist anymore, and it was superseeded by the "source phase imports" proposal, which uses the
source
modifier for imports instead ofmodule
.迁移:用
sourcePhaseImports
替换插件,并迁移代码以在导入声明中使用source
而不是module
。¥Migration: Replace the plugin with
sourcePhaseImports
, and migrate your code to usesource
instead ofmodule
in import declarations.
@babel/generator
-
删除
jsonCompatibleStrings
生成器选件(#9943、#12477)¥Remove
jsonCompatibleStrings
generator option (#9943, #12477)迁移:
@babel/generator
允许为 jsesc 指定选项,jsesc 是一个用于转义打印值的库。如果你使用的是jsonCompatibleStrings
选项,则可以将其替换为jsescOption: { json: true }
。¥Migration:
@babel/generator
allows to specify options for jsesc, a library used to escape printed values. If you are using thejsonCompatibleStrings
option, you can replace it withjsescOption: { json: true }
.
@babel/eslint-parser
-
删除
allowImportExportEverywhere
选项 (#13921)¥Remove
allowImportExportEverywhere
option (#13921)迁移:请改用
babelOptions.parserOpts.allowImportExportEverywhere
。¥Migration: Use
babelOptions.parserOpts.allowImportExportEverywhere
instead..eslintrc{
"parser": "@babel/eslint-parser",
"parserOptions": {
- "allowImportExportEverywhere": true,
+ "babelOptions": {
+ "parserOpts": {
+ "allowImportExportEverywhere": true
+ }
+ }
}
}
-
parserOpts.allowSuperOutsideMethod
默认为false
(#13921)¥
parserOpts.allowSuperOutsideMethod
defaults tofalse
(#13921)迁移:如果你想恢复 Babel 7 的行为,请将
babelOptions.parserOpts.allowSuperOutsideMethod
设置为true
。¥Migration: If you want to restore to Babel 7 behaviour, set
babelOptions.parserOpts.allowSuperOutsideMethod
totrue
. -
allowReturnOutsideFunction
是从ecmaFeatures.globalReturn
(#13921) 推断出来的¥
allowReturnOutsideFunction
is inferred fromecmaFeatures.globalReturn
(#13921)迁移:如果要启用
allowReturnOutsideFunction
,请将ecmaFeatures.globalReturn
设置为true
。¥Migration: If you want to enable
allowReturnOutsideFunction
, setecmaFeatures.globalReturn
totrue
..eslintrc{
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaFeatures": {
"globalReturn": true
}
}
}
@babel/plugin-transform-modules-systemjs
-
将
import()
转换为 SystemJS 时需要@babel/plugin-transform-dynamic-import
(#12700)¥Require
@babel/plugin-transform-dynamic-import
when transformingimport()
to SystemJS (#12700)迁移:将
@babel/plugin-transform-dynamic-import
添加到你的配置中:你已经可以在 Babel 7 中做到这一点了。如果你使用的是@babel/preset-env
,则无需执行任何操作。¥Migration: Add
@babel/plugin-transform-dynamic-import
to your config: you can already do it in Babel 7. If you are using@babel/preset-env
, you don't need to do anything.babel.config.js.diff{
"plugins": [
+ "@babel/plugin-transform-dynamic-import",
"@babel/plugin-transform-modules-systemjs",
]
}注意:自引入以来,所有其他支持动态导入的插件(
transform-modules-commonjs
和transform-modules-amd
)都需要单独的插件。我们无法为transform-modules-systemjs
更改它,因为该包确实已经支持动态导入。¥Notes: All the other plugins which support dynamic import (
transform-modules-commonjs
andtransform-modules-amd
) require the separate plugin since it was introduced. We couldn't change it fortransform-modules-systemjs
because that package did already support dynamic import.
@babel/plugin-proposal-decorators
-
仅支持
legacy
和2023-11
。该插件现在需要version
选项(#12712、#15676)¥Only support
legacy
and2023-11
. The plugin now requires aversion
option (#12712, #15676)迁移:如果你正在使用
"2018-09"
或尚未指定version
选项,则应迁移到 最新版本的提案"2023-11"
。¥Migration: You should migrate to the latest version of the proposal
"2023-11"
, if you are using the"2018-09"
or you have not specified aversion
option.babel.config.json{
"plugins": [
["@babel/plugin-proposal-decorators", {
- "decoratorsBeforeExport": true,
- "version": "2018-09",
+ "version": "2023-11"
}]
]
}语法是相同的,但你需要重写装饰器函数。规范存储库提供了 最新版本与
2018-09
版本对比。从 Babel 7.22.0 开始,你已经可以使用@babel/plugin-proposal-decorators
的"version": "2023-05"
选项进行迁移。¥The syntax is the same, but you will need to rewrite your decorator functions. The spec repo provides comparison between the latest version and the
2018-09
version. You can already migrate since Babel 7.22.0, using the"version": "2023-05"
option of@babel/plugin-proposal-decorators
.虽然 Babel 8 仍然支持
legacy
版本,但建议迁移到2023-05
版本,无论:Babel 8 和 TypeScript 5.0 都支持2023-05
版本,而 Babel 和tsc
的实现之间的legacy
版本中存在 一些行为差异。¥Although Babel 8 still supports the
legacy
version, it is advisable to migrate to the2023-05
version regardless: both Babel 8 and TypeScript 5.0 support the2023-05
version, while there are a few behaviour differences in thelegacy
version between Babel andtsc
's implementation.
@babel/plugin-transform-runtime
-
corejs
选项已被删除 (#16311)¥The
corejs
option has been removed (#16311)迁移:要注入 polyfills,可以直接使用
babel-plugin-polyfill-corejs3
或 babel-plugin-polyfill-corejs2。¥Migration: To inject polyfills, you can use
babel-plugin-polyfill-corejs3
or babel-plugin-polyfill-corejs2 directly.
-
useESModules
选项已被删除 (#16141)¥The
useESModules
option has been removed (#16141)迁移:从你的配置中删除它。
@babel/runtime
现在将在需要时使用package.json#exports
自动公开 ES 模块。¥Migration: Delete it from your configuration.
@babel/runtime
will now automatically expose ES modules when needed, usingpackage.json#exports
. -
runtime
和helpers
选项已被删除 (#16311)¥The
runtime
andhelpers
options have been removed (#16311)迁移:从你的配置中删除它们:
@babel/runtime
现在将始终导入助手。如果你不想将导入注入到辅助程序中,请从你的配置中删除@babel/plugin-transform-runtime
。¥Migration: Delete them from your configuration:
@babel/runtime
will now always import helpers. If you don't want to inject imports to helpers, remove@babel/plugin-transform-runtime
from your config.
@babel/node
-
-gc
和-d
命令行标志已被删除 (#15956) 迁移:分别使用--expose-gc
和--inspect
Node.js 标志。请注意,虽然-d
是--debug
的缩写,但后者却是 自 Node.js 7.7.0 起已弃用。¥The
-gc
and-d
command-line flags have been removed (#15956) Migration: Use the--expose-gc
and--inspect
Node.js flags respectively. Note that although-d
was short for--debug
, the latter has been deprecated since Node.js 7.7.0. -
Node.js 和 Babel 的命令行标志现在必须在文件名之前传递,而脚本本身的标志必须在文件名之后传递。(#16706)
¥Command-line flags for Node.js and Babel must now be passed before the filename, while flags for the script itself must be passed after. (#16706)
编译变更
¥Compilation Changes
默认目标
¥Default target
-
使用 browserslist 的
defaults
作为默认编译目标(#12989,#15551)。¥Use browserslist's
defaults
as default compilation target (#12989, #15551).迁移:如果你已经在使用
targets
或拥有.browserslist
配置文件,则此更改不会影响你。否则,你可能会接受自 browserslist 的defautls
涵盖了大多数现代浏览器 以来的新行为。¥Migration: If you are already using
targets
or have a.browserslist
config file, this change won't affect you. Otherwise, you'll probably be fine with the new behavior since the browserslist'sdefautls
covers most modern browsers.如果你需要支持旧版浏览器,请创建
.browserlist
配置。¥If you need to support legacy browsers, create a
.browserlist
config.
@babel/preset-env
-
¥Enable the
bugfixes
option by default (#13866)迁移:你可能会对新行为感到满意,因为 Babel 现在尝试将损坏的语法编译为目标浏览器支持的最接近的未损坏的现代语法。如果无论如何你想恢复 Babel 7 的行为,你可以指定
bugfixes: false
。¥Migration: You will probably be fine with the new behaviour as Babel now tries to compile the broken syntax to the closest non-broken modern syntax supported by your target browsers. If anyhow you want to restore the Babel 7 behaviour, you can specify
bugfixes: false
.
JSX
-
¥Use the new JSX implementation by default (#12630)
迁移:如果你使用的是 React 或 Preact 的现代版本,它应该无需任何配置更改即可工作。否则,你可以将
runtime: "classic"
选项传递给@babel/preset-react
或@babel/plugin-transform-react-jsx
,以明确你对createElement
(或其他库中的等效函数)的使用。¥Migration: If you are using a modern version of React or Preact, it should work without any configuration changes. Otherwise, you can pass the
runtime: "classic"
option to@babel/preset-react
or@babel/plugin-transform-react-jsx
to be explicit about your usage ofcreateElement
(or the equivalent function in other libraries).
-
¥Transforms JSX spread properties using object spread (#12593)
迁移:请参阅 配置更改 / 预设 React 部分。
¥Migration: See the Configuration changes / preset-react section.
-
¥Disallow sequence expressions inside JSX attributes (#12447)
迁移:查找并替换以下代码模式。你可以在 Babel 8 之前开始迁移:
¥Migration: Find and replace the following code patterns. You can start the migration prior to Babel 8:
input.jsx- <p key={foo, bar}></p> // Invalid
+ <p key={(foo, bar)}></p> // Valid -
禁止 JSX 文本中出现
{
、}
、<
和>
(#12451)¥Disallow
{
,}
,<
and>
in JSX text (#12451)迁移:请改用
{'{'}
、{'}'}
、{'<'}
和{'>'}
。查找并替换以下代码模式。你可以在 Babel 8 之前开始迁移:¥Migration: Use
{'{'}
,{'}'}
,{'<'}
and{'>'}
instead. Find and replace the following code patterns. You can start the migration prior to Babel 8:input.jsx- <p>">" is greater than.</p>
+ <p>"{'>'}" is greater than.</p>注意:从技术上讲,这是一个规范合规性修复,因为 JSX 规范 已经禁止它们。然而,我们选择将其推迟到 Babel 8,因为它可能会破坏某人的代码。
¥Notes: This is technically a spec compliance fix becase the JSX specification already forbids them. However, we have chosen to postpone it until Babel 8 because it could break someone's code.
TypeScript
-
¥Preserve uninitialized class fields (#12461)
迁移:如果你不希望字段初始化为
undefined
,请使用 TypeScript 3.7 中引入的新declare
语法:¥Migration: Use the new
declare
syntax, introduced in TypeScript 3.7, if you don't want fields to be initialized toundefined
:input.tsclass A {
foo: string | void; // initialized to undefined
declare bar: number; // type-only, will be removed
}
Flow
-
¥Preserve uninitialized class fields (#12457)
迁移:如果你不希望字段初始化为
undefined
,请使用 Flow 0.120 中引入的新declare
语法:¥Migration: Use the new
declare
syntax, introduced in Flow 0.120, if you don't want fields to be initialized toundefined
:input.jsclass A {
foo: string | void; // initialized to undefined
declare bar: number; // type-only, will be removed
}
杂项
¥Misc
-
按字符串字面量 (#12675) 中的方式输出非 ASCII 字符
¥Output non-ASCII characters as-is in string literal (#12675)
如果你使用
@babel/cli
、WebPack、Rollup、create-react-app 或其他 Node.js 支持的打包器中的任何一种,转换后的代码始终使用utf-8
进行编码,并且你的应用不会受到影响。仅当你手动调用babel.transform
API 并且你的 Web 服务器未以utf8
编码提供 js 文件时,此问题才会出现。¥If you are using any one of
@babel/cli
, WebPack, Rollup, create-react-app or other Node.js powered bundlers, the transformed code is always encoded withutf-8
and your app will not be affected. The issue only affects if you are manually calling thebabel.transform
API and your web server is not serving js files in theutf8
encoding.迁移:确保你的服务器始终以
utf8
编码提供 js 文件。如果无法控制服务器输出,请在 html 文件中指定script
标记的charset
属性。¥Migration: Ensure your server is always serving js files in the
utf8
encoding. If you can not control the server output, specify thecharset
attribute of thescript
tag in the html files.<script charset="utf-8" src="your-app.js"></script>
你还可以通过以下方式恢复 Babel 7 行为
¥You can also restore to the Babel 7 behaviour by
babel.config.js{
generatorOpts: {
jsescOption: {
minimal: false
}
}
}