推荐开源项目：`@babel/preset-modules`

推荐开源项目：@babel/preset-modules

preset-modulesA Babel preset that targets modern browsers by fixing engine bugs (will be merged into preset-env eventually)项目地址:https://gitcode.com/gh_mirrors/pr/preset-modules

1、项目介绍

@babel/preset-modules 是一个Babel预设插件，专门设计用于为现代浏览器提供支持，这些浏览器占所有网络流量的88%。它提供了对诸如async/await、Tagged Templates、箭头函数、解构赋值和剩余参数等ES6特性的支持，并解决了现代JavaScript引擎中的错误和不一致性。通过转换不兼容的语法到最接近的非破损现代语法，这个预设能帮助你在保持代码效率的同时，创建更小的包体积。

2、项目技术分析

与@babel/preset-env不同，@babel/preset-modules不是将新语法完全转译回ES5，而是巧妙地将其转换为最接近且在目标浏览器中工作良好的现代语法。例如，对于Edge 16和17版本中存在的某些解析问题，该预设并不会将所有新的函数参数语法全部转译，而只是针对出问题的部分进行修复。

此外，该项目还特别关注输出代码的大小和性能优化。当你开启loose模式时，可以进一步减少输出的大小，但会禁用一种针对旧版Edge的函数名称处理方法，如果不需要依赖Function.prototype.name，这通常是一个值得考虑的选择。

3、项目及技术应用场景

• 现代浏览器应用开发：如果你正在构建一个面向最新浏览器的应用，希望利用ES6+特性并保持代码简洁，那么@babel/preset-modules是理想选择。
• 模块/nomodule模式部署：你可以为现代浏览器服务由@babel/preset-modules编译的代码（模块类型），同时使用@babel/preset-env为老版本浏览器编译的代码（nomodule类型）。
• 性能敏感项目：通过避免不必要的转译，@babel/preset-modules可实现更快的运行速度和更小的包体积。

4、项目特点

• 针对性修复：针对特定浏览器的语法错误进行修复，而不是全局转译。
• 优化的输出：转换后的代码体积小，性能好，适用于现代浏览器。
• 灵活配置：支持loose模式以进一步压缩输出，以及与其他工具（如Terser）的整合选项。
• 广泛的支持：涵盖如jsx spread属性、默认参数、tagged templates等功能，同时考虑了Safari 10+和Edge 16+的兼容性问题。

要使用@babel/preset-modules，首先通过npm安装，然后在你的Babel配置文件中添加预设。对于需要支持模块/nomodule模式的项目，可以配置不同的环境设置。

通过这种方式，@babel/preset-modules使得开发者能够在享受现代JavaScript特性的便利性的同时，确保代码在大多数现代浏览器中稳定运行，而不必牺牲性能。

preset-modulesA Babel preset that targets modern browsers by fixing engine bugs (will be merged into preset-env eventually)项目地址:https://gitcode.com/gh_mirrors/pr/preset-modules