如何列出@babel/preset-env包含哪些转换？

在应对这个问题时，首先需要了解 @babel/preset-env是Babel的一个智能预设，它允许你使用最新的JavaScript语法，而不需要微管理你需要包含哪些转换和polyfills。它根据目标环境自动确定需要哪些转换和polyfills。

要列出 @babel/preset-env包含哪些转换，可以采取以下几步操作：

1. 配置Babel

首先，确保你已经安装了 @babel/core和 @babel/preset-env。如果还没有安装，可以通过npm或yarn进行安装：

bash
npm install --save-dev @babel/core @babel/preset-env

2. 查询转换

方法一：使用 Babel CLI

通过Babel命令行工具生成一份包含所有转换的列表。可以使用如下命令：

bash
npx babel --presets @babel/preset-env --plugins

这条命令会显示出 @babel/preset-env根据当前的配置所应用的插件列表。

方法二：查看文档和源代码

访问Babel的官方文档和GitHub仓库可以查看 @babel/preset-env的源代码，了解它是如何根据不同的配置动态调整包含的插件。Babel的官方文档地址是 Babel Docs，GitHub仓库的地址是 Babel GitHub。

3. 示例

举例说明，如果你的项目需要支持的目标环境是旧版浏览器，那么 @babel/preset-env会包括转换ES6语法（如箭头函数，const/let等）到ES5的插件。

4. 使用 babel.config.js

在项目的根目录创建或编辑 babel.config.js，可以具体指定目标环境：

javascript
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
    }],
  ],
};

这样配置后，@babel/preset-env就会根据指定的浏览器版本来决定需要包含哪些具体的转换。

5. 实际运用

在开发中，通过调整 targets字段来控制转换的范围和类型，使其最适合你的项目需求。这样可以有效地减少最终包的体积，提高项目的运行效率。

以上就是如何列出 @babel/preset-env所包含的转换的几种方法，希望对你有帮助！