Skip to main content

升级到 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 7Babel 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.

babel.config.json
{
"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:

input.js
- 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

medium

  • 根 AMD/UMD/SystemJS 选项,即 moduleIdsgetModuleIdmoduleRootmoduleIdfilenameRelative 已移至插件选项(#5473#12724)。

    ¥The root AMD/UMD/SystemJS options, namely moduleIds, getModuleId, moduleRoot, moduleId and filenameRelative 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.js
    module.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 config babel.config.js and specify options there.

@babel/preset-env

high

medium

  • includesexcludes 尊重重命名的包名称 (#15576)

    ¥includes and excludes respect renamed package names (#15576)

    迁移:如果 includesexcludes 包含 包重命名部分 中提到的任何插件,请将其更改为新名称。例如,

    ¥Migration: If includes or excludes 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"]
    }
    ]]
    }

low

  • 删除 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 the forceAllTransforms option.

  • 删除的语法插件不能在 includesexcludes#15810)中使用

    ¥Removed syntax plugins can not be used in includes and excludes (#15810)

    迁移:如果你使用 includesexcludes 选项中的任何 上面列出的语法插件,则可以安全地删除它们。

    ¥Migration: You can safely remove them if you are using any of syntax plugins listed above in the includes and excludes options.

@babel/preset-react

high

  • 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_ENVNODE_ENV 环境变量,则默认为 development

    ¥Note that Babel's env, set through envName option, defaults to process.env.BABEL_ENV || process.env.NODE_ENV || "development": if you don't specify neither the envName option nor the BABEL_ENV or NODE_ENV environment variables, it will default to development.

    迁移:在生产版本中,将 BABEL_ENVNODE_ENV 环境变量(或 envName Babel 选项)设置为 "production"。如果你只想在生产模式下运行此预设,则可以将 development 选项明确设置为 false

    ¥Migration: In production builds, set the BABEL_ENV or NODE_ENV environment variables, or the envName Babel option, to "production". If you want to run only this preset in production mode, then you can explicitly set the development option to false.

medium

  • 删除 useSpreaduseBuiltIns 选项 (#12593)

    ¥Remove useSpread and useBuiltIns 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 transpile Object.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 the useSpread option.

  • targets.esmodules: true 选项现在的行为与 targets.esmodules: "intersect"#17188)相同。

    ¥targets.esmodules: true option now behaves as same as targets.esmodules: "intersect" (#17188)

    迁移:在 Babel 7 中,指定 esmodules: true 将覆盖 browsers 目标或 browserslist 的目标,而指定 "intersect" 将与这些目标相交。

    ¥Migration: In Babel 7, specifying esmodules: true will override the browsers target or browserslist'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 the esmodules option and set the following browsers 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.

low

  • 在自动运行时禁止 filter 选项 (#15068)

    ¥Disallow filter option in automatic runtime (#15068)

    迁移:filter 选项只能与 classic 运行时一起使用。如果你已切换到 automatic 运行时,则可以安全地删除此选项。否则请指定 runtime: "classic"

    ¥Migration: The filter option can only be used with the classic runtime. If you have switched to automatic runtime, you can safely remove this option. Otherwise please specify runtime: "classic".

@babel/preset-typescript

high

  • 删除 isTSXallExtensions 选项 (#14955)

    ¥Remove isTSX and allExtensions options (#14955)

    迁移:

    ¥Migration:

    • isTSX: trueallExtensions: true

      ¥isTSX: true and allExtensions: 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, use ignoreExtensions: 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 to plugins.

    • isTSX: falseallExtensions: true

      ¥isTSX: false and allExtensions: true

      使用 ignoreExtensions: true,参见上面的示例。

      ¥Use ignoreExtensions: true, see the example above.

    • isTSX: falseallExtensions: false

      ¥isTSX: false and allExtensions: false

      你可以安全地删除它们。

      ¥You can safely remove them.

medium

  • 删除 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 the declare 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 valid preset-typescript option and thus should be removed.

@babel/plugin-transform-typescript

medium

  • 删除 allowDeclareFields 选项 (#12461)

    ¥Remove allowDeclareFields option (#12461)

    迁移:从你的配置中删除该选项。

    ¥Migration: Remove the option from your config.

@babel/plugin-syntax-typescript

high

  • 删除 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 to plugins:

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

medium

  • 删除 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 the declare 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

medium

  • 删除 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

medium

  • 删除 estree 插件选项 classFeatures (#13752)

    ¥Remove estree plugin option classFeatures (#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 the eslint-parser only works with ESLint 8 and above.

    • 删除 decimal 插件选项 #16741

      ¥Remove decimal plugin option #16741

    迁移:将你的项目迁移到最新提案并从你的配置中删除插件,因为最新提案不再具有语法。

    ¥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 of with. The proposal moved ahead without the assert keyword.

    迁移:用 importAttributes 替换插件。如果你仍在使用 assert 关键字,建议你迁移到 with:如果无法这样做,你可以使用 ["importAttributes", { deprecatedAssertSyntax: true }] 选项。`

    ¥Migration: Replace the plugin with importAttributes. If you are still using the assert keyword it's recommended that you migrate to with: 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 of module.

    迁移:用 sourcePhaseImports 替换插件,并迁移代码以在导入声明中使用 source 而不是 module

    ¥Migration: Replace the plugin with sourcePhaseImports, and migrate your code to use source instead of module in import declarations.

@babel/generator

medium

  • 删除 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 the jsonCompatibleStrings option, you can replace it with jsescOption: { json: true }.

@babel/eslint-parser

medium

  • 删除 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
    + }
    + }
    }
    }

low

  • parserOpts.allowSuperOutsideMethod 默认为 false (#13921)

    ¥parserOpts.allowSuperOutsideMethod defaults to false (#13921)

    迁移:如果你想恢复 Babel 7 的行为,请将 babelOptions.parserOpts.allowSuperOutsideMethod 设置为 true

    ¥Migration: If you want to restore to Babel 7 behaviour, set babelOptions.parserOpts.allowSuperOutsideMethod to true.

  • allowReturnOutsideFunction 是从 ecmaFeatures.globalReturn (#13921) 推断出来的

    ¥allowReturnOutsideFunction is inferred from ecmaFeatures.globalReturn (#13921)

    迁移:如果要启用 allowReturnOutsideFunction,请将 ecmaFeatures.globalReturn 设置为 true

    ¥Migration: If you want to enable allowReturnOutsideFunction, set ecmaFeatures.globalReturn to true.

    .eslintrc
    {
    "parser": "@babel/eslint-parser",
    "parserOptions": {
    "ecmaFeatures": {
    "globalReturn": true
    }
    }
    }

@babel/plugin-transform-modules-systemjs

medium

  • import() 转换为 SystemJS 时需要 @babel/plugin-transform-dynamic-import(#12700)

    ¥Require @babel/plugin-transform-dynamic-import when transforming import() 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-commonjstransform-modules-amd)都需要单独的插件。我们无法为 transform-modules-systemjs 更改它,因为该包确实已经支持动态导入。

    ¥Notes: All the other plugins which support dynamic import (transform-modules-commonjs and transform-modules-amd) require the separate plugin since it was introduced. We couldn't change it for transform-modules-systemjs because that package did already support dynamic import.

@babel/plugin-proposal-decorators

medium

  • 仅支持 legacy2023-11。该插件现在需要 version 选项(#12712#15676

    ¥Only support legacy and 2023-11. The plugin now requires a version 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 a version 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 the 2023-05 version regardless: both Babel 8 and TypeScript 5.0 support the 2023-05 version, while there are a few behaviour differences in the legacy version between Babel and tsc's implementation.

@babel/plugin-transform-runtime

medium

low

  • 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, using package.json#exports.

  • runtimehelpers 选项已被删除 (#16311)

    ¥The runtime and helpers 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

low

  • -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

medium

@babel/preset-env

low

  • 默认启用 bugfixes 选项 (#13866)

    ¥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

high

  • 默认使用新的 JSX 实现(#12630)

    ¥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 of createElement (or the equivalent function in other libraries).

medium

low

  • 禁止 JSX 属性内的序列表达式(#12447)

    ¥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

high

  • 保留未初始化的类字段(#12461)

    ¥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 to undefined:

    input.ts
    class A {
    foo: string | void; // initialized to undefined
    declare bar: number; // type-only, will be removed
    }

Flow

high

  • 保留未初始化的类字段(#12457)

    ¥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 to undefined:

    input.js
    class A {
    foo: string | void; // initialized to undefined
    declare bar: number; // type-only, will be removed
    }

杂项

¥Misc

low

  • 按字符串字面量 (#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 with utf-8 and your app will not be affected. The issue only affects if you are manually calling the babel.transform API and your web server is not serving js files in the utf8 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 the charset attribute of the script 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
    }
    }
    }