在Web开发中，代码转换是必不可少的一环。一些新的浏览器特性可能会在旧版本的浏览器上无法正常工作，而此时就需要进行编译转换以保证代码可以在所有浏览器上正常运行。
Babel 是转换代码的常用工具，可以将较新的 JavaScript 语法或者一些实验性质的语言特性转换为浏览器能理解的语法，同时也可以进行代码优化和压缩等操作。本文将详细介绍如何通过 babel 配置实现 project-wide 的代码转换。
Babel 的安装和配置
首先，需要安装 babel 相关的依赖：
# 使用 npm 安装 npm install --save-dev @babel/core @babel/cli @babel/preset-env
其中，@babel/core 是 babel 的核心模块，@babel/cli 则提供了命令行工具方便使用，@babel/preset-env 则是 babel 预设的插件集合。
接下来，在项目根目录下新建一个 .babelrc 文件，作为 babel 的配置文件。
{
"presets": ["@babel/preset-env"]
}以上代码配置了 @babel/preset-env 作为预设插件进行代码转换。
webpack 集成 babel
对于使用 webpack 构建工具的前端项目，需要进行 babel 和 webpack 的集成。在 webpack.config.js 中配置 babel-loader 即可将代码转换集成到 webpack 中。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--babel-loader 是 webpack 中用于加载 JavaScript 文件并使用 Babel 转换代码的 loader。 在以上代码中，我们只对项目中的 js 文件进行了转换，exclude: /node_modules/ 代表排除 node_modules 目录下的文件，以提高构建速度。
Babel Plugin
Babel Plugin 是除了 preset 以外的插件。这些插件可以实现更加细粒度的代码转换操作。例如，@babel/plugin-transform-runtime can 实现对 ES6 代码转换成 ES5 代码，并使用 babel-runtime 来避免在代码中出现重复的 helper 函数，使得代码输出更加的精简。
{
"plugins": [
"@babel/plugin-transform-runtime"
]
}总结
本文介绍了使用 babel 进行 project-wide 的代码转换的方法。通常情况下，我们可能会采用 babel-loader 作为 webpack 的 loader，结合 babel 的 preset 和 plugin，可以快速地编译转换我们代码，完成代码输出，并减少了代码冗余。
我们希望本文能够帮助读者更加深入了解 babel 的使用以及构建工具 webpack 与 babel 的集成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1b443f6b2d6eab3b8a3f4