如果你是一名前端开发者，那么你一定知道 Babel，这是一个非常流行的 JavaScript 编译器，它可以将 ES6+ 的代码编译成 ES5，以便在较旧的浏览器上运行。
Babel 有一个称为 preset 的功能，它是一组 Babel 插件的集合，用于转换特定的语言功能。@babel/preset-env 是 Babel 的一个预设，它可以根据你的目标环境自动启用必要的插件，因此你不必手动为不同目标环境配置不同的插件。
在这篇文章中，我们将介绍如何使用 npm 包 @types/babel__preset-env，它是为 TypeScript 编写的 @babel/preset-env 类型定义包。
安装
@types/babel__preset-env 是一个类型定义包，它不包含实际的代码，因此你需要先安装 @babel/preset-env：
npm install @babel/preset-env
然后，安装 @types/babel__preset-env：
npm install @types/babel__preset-env --save-dev
配置
在你的 Babel 配置文件中，应该像这样使用 @babel/preset-env：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- ------ - ---------- ------- -- ---
-
-
-
-
-上述配置使用 @babel/preset-env，将目标浏览器设置为“最近 2 个版本”和“Safari 7 及以上版本”。
使用 TypeScript
如果你使用 TypeScript 编写代码，可以将 @types/babel__preset-env 导入类型定义，如下所示：
import "@types/babel__preset-env"; // 使用 preset
现在，TypeScript 将自动识别 @babel/preset-env 中的选项，以及其返回的配置对象的类型。
示例代码
假设你有一个包含 ES6+ 代码的文件 index.js，你希望将其编译为 ES5，以便在浏览器中运行。以下是我们的示例代码：
const foo = (x) => {
console.log(`Hello, ${x}!`);
};
foo("world");使用 Babel，我们将编译该文件，使其变为可以在任何支持 ES5 的浏览器上运行：
"use strict";
var foo = function foo(x) {
console.log("Hello, ".concat(x, "!"));
};
foo("world");现在，我们将以上示例添加到 TypeScript 项目中的 index.ts 文件中：
import "@types/babel__preset-env";
const foo = (x: string) => {
console.log(`Hello, ${x}!`);
};
foo("world");使用 Babel，我们将编译该文件，以便它可以在任何支持 ES5 的浏览器上运行：
"use strict";
var foo = function foo(x) {
console.log("Hello, ".concat(x, "!"));
};
foo("world");结论
通过使用 npm 包 @types/babel__preset-env，你可以在 TypeScript 项目中轻松地使用 @babel/preset-env。它将自动识别 preset-env 选项，以及其返回的配置对象的类型。
注意，@types/babel__preset-env 不包含实际的代码，只是类型定义包。在使用之前，你需要安装 @babel/preset-env。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f190a17403f2923b035c431