随着 JavaScript 的不断发展，越来越多的语言特性被加入到了 JavaScript 中，使其成为了一门功能强大的语言。但是，这些新特性并不是所有浏览器都支持的，这就导致了我们需要使用一些工具来帮助我们将新特性转换成老特性，以便代码可以在所有浏览器中运行。这就是 Babel 的作用，它是一个 JavaScript 编译器，可以将新特性转换成老特性。
在本文中，我们将介绍如何在 VS Code 中使用 Babel 转换你的 JavaScript 代码。我们将介绍如何安装和配置 Babel，以及如何使用它来转换代码。
安装 Babel
在使用 Babel 之前，你需要先安装它。你可以使用 npm 来安装 Babel，命令如下：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这个命令会安装 Babel 的核心库和一些必要的插件，以及一个用来转换新特性的 preset。
配置 Babel
安装完 Babel 后，我们需要在项目中配置 Babel。我们需要在项目根目录下创建一个名为 .babelrc 的文件，并在其中添加以下配置：
{
"presets": ["@babel/preset-env"]
}这个配置告诉 Babel 使用 @babel/preset-env 插件来转换代码。
使用 Babel 转换代码
现在我们已经安装和配置了 Babel，我们可以开始使用它来转换代码了。我们可以使用 Babel 的 CLI 工具来转换代码。我们可以在终端中运行以下命令来将 src/index.js 文件转换成 ES5 代码：
npx babel src --out-dir lib
这个命令会将 src 目录下的所有 JavaScript 文件转换成 ES5 代码，并将转换后的代码保存到 lib 目录中。
在 VS Code 中使用 Babel
为了更方便地使用 Babel，我们可以在 VS Code 中安装一个 Babel 插件。这个插件可以帮助我们自动转换代码，并在代码保存时自动执行转换操作。我们可以在 VS Code 的插件市场中搜索 Babel 并安装它。
安装完插件后，我们需要在 VS Code 的设置中配置 Babel。我们可以在 settings.json 文件中添加以下配置：
"babel.enable": true,
"files.associations": {
"*.js": "javascript"
}这个配置告诉 VS Code 启用 Babel，并将所有 .js 文件关联到 JavaScript 语言。
现在，当我们在 VS Code 中编辑 JavaScript 代码时，Babel 插件会自动将新特性转换成老特性，以便代码可以在所有浏览器中运行。
示例代码
以下是一个使用新特性的 JavaScript 代码示例：
const arr = [1, 2, 3]; const newArr = arr.map(item => item * 2); console.log(newArr);
使用 Babel 转换后的代码如下：
"use strict";
var arr = [1, 2, 3];
var newArr = arr.map(function (item) {
return item * 2;
});
console.log(newArr);可以看到，箭头函数被转换成了普通函数，以便代码可以在所有浏览器中运行。
总结
在本文中，我们介绍了如何在 VS Code 中使用 Babel 转换 JavaScript 代码。我们讲解了如何安装和配置 Babel，以及如何使用它来转换代码。我们还介绍了如何在 VS Code 中使用 Babel 插件来自动转换代码。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d2a75d2f5e1655d57d3d8