随着前端技术的发展，JavaScript 作为一门编程语言也越来越受到重视。但是，由于浏览器兼容性的问题，我们需要使用一些工具来帮助我们将代码转换成可以被所有浏览器兼容的代码。Babel 就是其中一种工具。
Babel 是一个 JavaScript 编译器，可以将 ES6+ 代码转换为浏览器可以理解的 ES5 代码。除此之外，Babel 还支持转换 JSX、TypeScript 等语言。在实际开发中，我们通常需要将多个文件进行转换，本文将会介绍如何使用 Babel 转换多个文件。
安装 Babel
在开始之前，我们首先需要安装 Babel。可以通过 npm 进行安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
@babel/core：Babel 的核心库，提供了转换代码的能力。@babel/cli：Babel 的命令行工具。@babel/preset-env：Babel 的预设，可以根据当前的环境自动确定需要转换的语法。
配置 Babel
在安装完成后，我们需要配置 Babel。可以在项目根目录下创建一个 .babelrc 文件，用于配置 Babel。例如：
// javascriptcn.com 代码示例
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": "58",
"ie": "11"
}
}
]
]
}presets：Babel 的预设列表，可以根据需要添加不同的预设。@babel/preset-env：Babel 的预设之一，用于根据当前环境自动确定需要转换的语法。targets：用于指定需要支持的浏览器版本。
转换多个文件
在配置完成后，我们就可以使用 Babel 来转换多个文件了。Babel 提供了一个命令行工具 babel，可以将指定的文件夹下的所有文件转换成 ES5 代码。
例如，我们有一个 src 文件夹，其中包含多个 JavaScript 文件：
src/ ├── index.js ├── moduleA.js └── moduleB.js
我们可以使用如下命令将这些文件转换成 ES5 代码，并输出到 dist 文件夹中：
babel src --out-dir dist
执行完后，dist 文件夹中会生成与 src 文件夹中相同的文件，只不过文件中的代码已经被转换成了 ES5 代码。
指定需要转换的文件类型
默认情况下，Babel 只会转换 JavaScript 文件。如果需要转换其他类型的文件，可以使用 --extensions 参数指定需要转换的文件类型。
例如，我们需要将 TypeScript 文件转换成 ES5 代码，可以使用以下命令：
babel src --out-dir dist --extensions .ts
指定需要忽略的文件
有时，我们需要忽略某些文件，例如测试文件或者第三方库文件。可以使用 --ignore 参数指定需要忽略的文件。
例如，我们需要忽略 test 文件夹和 jquery.js 文件，可以使用以下命令：
babel src --out-dir dist --ignore "test/*","jquery.js"
总结
本文介绍了如何使用 Babel 转换多个文件。首先需要安装 Babel，然后配置 Babel，最后使用 babel 命令将指定的文件夹下的所有文件转换成 ES5 代码。同时，也可以指定需要转换的文件类型和需要忽略的文件。
Babel 是前端开发中非常重要的工具，掌握 Babel 的使用可以帮助我们更好地处理浏览器兼容性问题，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65582855d2f5e1655d261335