跳至主内容

7.5.0 发布：动态导入与 F# 管道操作符

· 1 分钟阅读
Nicolò Ribaudo
非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

今天我们正式发布 Babel 7.5.0！

本次更新增强了对多项 ECMAScript 提案的支持：包括 Stage 1 阶段的 F# 风格管道操作符，以及 Stage 4 阶段的动态 import() 提案官方插件（同时提供 preset-env 支持）。 此外还新增了对 TypeScript namespace（实验性功能）的支持，以及 preset-env 中 Browserslist default 查询的支持。

完整更新日志请查看 GitHub 发布页。

感谢以下开发者提交的首个 PR： Wesley Wolfe、 Martin Zlámal、 Blaine Bublitz、 Letladi Sebesho、 Paul Comanici、 Lidor Avitan、 Artem Butusov、 Sebastian Johansson、 Min ho Kim！

我们持续招募贡献者，特别需要协助进行问题分类、PR 审查以及在 Slack 提供技术支持。我们正在尝试 GitHub 新推出的问题分类角色机制，期待社区成员踊跃参与！😉

近期加入 Babel 组织的两位新成员就是绝佳范例：Tan Li Hau 在问题分类和故障修复方面贡献卓著，而 Thiago Arrais 则协助实现了管道操作符功能！

另外要分享的是，我们刚刚宣布推出官方播客！若您错过了消息，请查看昨日发布的公告！

我们的工作也离不开赞助商的支持。特别感谢 Discord 和 clay 成为 OpenCollective 银牌赞助商，同时感谢 Linkedin 成为 Henry 在 GitHub 的银牌赞助商！

特别鸣谢去中心化免授权命名协议 Handshake（兼容 DNS），去年捐赠了 $100,000！作为其 FOSS 社区资助计划的一部分，他们已承诺向 Apache、Debian、EFF 及 Babel 等开源社区提供总额 $10.2M 的资助。

如果您或贵公司希望支持 Babel 和 JavaScript 的演进但不知从何着手，可通过 Open Collective 赞助我们，更欢迎直接参与新 ECMAScript 提案的实现！作为志愿者驱动的项目，我们依赖社区支持来保障对广大 JavaScript 用户的服务，同时维护代码所有权。有意合作者请联系 Henry：henry@babeljs.io！

F# 管道操作符 (#9450 与 #9984)​

注意

管道操作符提案仍处于阶段1，因此其规范仍在定义中。

该提案包含几个正在讨论的变体。通过测试此插件，您可以帮助提案作者收集关于管道如何工作的反馈。但请注意，如果提案过程中的语义发生变化（它们确实会变化），则需要进行重构。

自7.3.0版本起，Babel已支持管道操作符提案的智能变体，而自7.0.0-beta版本起则支持"最小化"变体。

得益于Thiago Arrais和James DiGioia的共同努力，您现在还可以测试"F#风格"变体！如果您对此特定提案变体有任何想法或意见，可以联系James。

F#变体与智能变体有何不同？它不使用"主题引用"（#）概念，而是改用箭头函数。这样做的优势是更接近当前JavaScript的语法，代价是语法稍欠简洁。

Current JavaScriptF# pipelineSmart pipeline
JavaScript
let newScore = boundScore(
  0,
  100,
  add(7, double(person.score))
);
JavaScript
let newScore = person.score
  |> double
  |> n => add(7, n)
  |> n => boundScore(0, 100, n);

JavaScript
let newScore = person.score
  |> double
  |> add(7, #)
  |> boundScore(0, 100, #);

虽然这两个提案并非相互依赖或作为单一提案开发，但您可以将F#管道与部分应用（Babel 7.4.0起支持）结合使用：

JavaScript
let newScore = person.score
  |> double
  |> add(7, ?)
  |> boundScore(0, 100, ?);

请注意，虽然看起来与"智能"管道变体相似，但部分应用提案仅支持函数调用参数中的?。这意味着例如person |> #.score是有效的"智能"管道，而其F#等价形式必须使用箭头函数：person |> p => p.score。

F#管道操作符在处理await时也有所不同：

Current JavaScriptF# pipelineSmart pipeline
JavaScript
let id = (
  await (
    await fetch(url)
  ).json()
).ID;
JavaScript
let newScore = fetch(url)
  |> await
  |> r => r.json()
  |> await
  |> obj => obj.ID;
JavaScript
let newScore = fetch(url)
  |> await #
  |> #.json()
  |> await #
  |> #.ID;

若想测试此新提案变体，可在Babel配置中添加@babel/plugin-proposal-pipeline-operator：

JavaScript
module.exports = {
  plugins: [
    ["@babel/proposal-pipeline-operator", { proposal: "fsharp" }]
  ]
};

您也可以在REPL中通过启用"Stage 1"预设进行尝试。

动态导入 (#9552 和 #10109)​

尽管Babel支持解析动态导入import(source)已久，但始终缺乏一致的转换方式。

  • 使用webpack或rollup时，只需包含@babel/plugin-syntax-dynamic-import而不通过Babel转换

  • 使用Node时，可通过babel-plugin-dynamic-import-node插件转换

  • 使用SystemJS时，@babel/plugin-transform-modules-systemjs与@babel/plugin-syntax-dynamic-import结合使用即可转换，无需显式启用import()的转换插件

由于动态导入提案最近已并入主规范，我们决定将这些用例统一到单一入口：@babel/plugin-proposal-dynamic-import。此插件必须与模块转换插件之一配合使用，因为Babel需要知道您定位的模块加载系统。当定位CommonJS时，它内部委托给babel-plugin-dynamic-import-node。

例如，这是有效配置：

JavaScript
module.exports = {
  plugins: [
    "@babel/plugin-proposal-dynamic-import",
    "@babel/plugin-transform-modules-amd"
  ]
};

而以下配置无效：

JavaScript
module.exports = {
  plugins: [
    "@babel/plugin-proposal-dynamic-import"
  ]
};

如果只想解析 import() 表达式而不进行转换，只需引入 @babel/plugin-syntax-dynamic-import 包即可。

如果正在使用 @babel/preset-env，动态导入支持将默认启用。你无需担心 webpack 或 rollup 的支持问题，因为 babel-loader 和 rollup-plugin-babel 都会自动禁用 Babel 的转换，以便打包器能正确处理。

@babel/preset-env 中的 defaults browserslist 查询 (#8897)​

当未向 @babel/preset-env 传递任何 targets 时，它会运行所有语法转换（模拟现已弃用的 babel-preset-latest）。

为了支持此行为，我们不得不绕过 Browserslist 本身具有 默认选择 这一事实。这导致 @babel/preset-env 之前不允许使用 default 查询。

@babel/preset-env 现在支持在直接向预设传递 targets 时使用 defaults 查询：

JavaScript
module.exports = {
  presets: [
    ["@babel/preset-env", {
      targets: { browsers: "defaults" }
    }]
  ]
};

你也可以使用 .browserslistrc 文件进行设置，该文件也被其他工具如 Autoprefixer 或 Stylelint 使用。

@babel/preset-env 的默认行为仍然是编译所有内容，但我们可能会在 Babel 8 中切换为使用 defaults 查询。

实验性 TypeScript namespaces 支持 (#9785)​

到目前为止，命名空间 是 Babel 不支持的 TypeScript 第二大特性（第一个是类型检查！😛）。感谢社区成员 Wesley Wolfe 所做的工作，你现在可以在 TypeScript 插件中通过 @babel/plugin-transform-typescript 的 allowNamespaces 选项启用对它们的_实验性_支持：

JavaScript
module.exports = {
  plugins: [
    ["@babel/plugin-transform-typescript", {
      allowNamespaces: true
    }]
  ]
}

然后，你就可以在代码中使用命名空间：

JavaScript
namespace Validation {
  const lettersRegexp = /^[A-Za-z]+$/;
  const numberRegexp = /^[0-9]+$/;

  export class LettersOnlyValidator {
    isAcceptable(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

⚠️ 警告 ⚠️​

最初在 Babel 中添加 TypeScript 支持时，并未包含 namespaces，因为它们需要只有完整的 TypeScript 编译器和类型检查器才能提供的类型信息。因此，当前（实验性）支持存在一些限制：

  • 命名空间只能导出不可变绑定
  • 合并多个同名命名空间时，它们的作用域不共享

你可以在 @babel/plugin-transform-typescript 的文档中找到完整的注意事项列表。