Babel 7.24.0 出来了！

公众号：程序员白特，欢迎一起交流学习~

Babel 7.24.0 出来了！

目录

• 装饰器更新
• 支持JSON 模块导入
• 基于 Hermes 的 Flow 解析器更新

装饰器更新

与之前实现的 2023-05 版本相比，该版本主要区别在于通过 context.addInitializer 方法注册的初始值设定项的执行顺序。

我们可以通过在 @babel/plugin-proposal-decorators 中设置 "version"： "2023-11" 选项来启用此版本的提案：

babel.config.json

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "version": "2023-11"
    }]
  ]
}

JSON 模块导入

Babel 7.24.0 终于增加了对 JSON 模块 提案的支持，该提案自 2021 年以来一直处于第 3 阶段。该提案允许使用导入声明和类型直接导入 JSON 文件：“json”导入属性：

import myConfig from "./config.json" with { type: "json" };

Babel 将根据您的目标选项，以适当的方式将这些导入转换为在目标平台中加载 JSON 文件，例如：

• 现代浏览器

const myConfig = await fetch(import.meta.resolve("./config.json")).then(r => r.json());

• Node.js （ESM）
• Node.js （CommonJS）

const myConfig = JSON.parse(  require("fs").readFileSync(require.resolve("./config.json")));

• 上述各种组合

注意：不支持的旧版浏览器import.meta

我们可以使用插件启用它：@babel/plugin-proposal-json-modules

babel.config.json

{
  "targets": ["chrome 90", "firefox 90", "node 20.6"],
  "plugins": ["@babel/plugin-proposal-json-modules"]
}

基于 Hermes 的 Flow 解析器更新

Babel 很久以前就实现了对解析和转换 Flow 类型注解的支持，但在过去的一年里，Babel团队表明在跟上新的 Flow 语言功能方面做得并不好。

与此同时，Hermes 团队一直在开发一个 Babel 插件 babel-plugin-syntax-hermes-parser，它允许你直接使用 Hermes（React Native 的新 JavaScript 引擎）来解析 Flow 代码。它支持所有最新的 Flow 功能，例如类型转换和条件类型。

现在，您可以使用 @babel/preset-flow 的 experimental_useHermesParser 选项更轻松地启用此解析器：

babel.config.json

{
  "presets": [
    ["@babel/preset-flow", {
      "experimental_useHermesParser": true
    }]
  ]
}

警告：Hermes 解析器尚不支持基于文件内注释的转换