Babel 最简入门指南

什么是 Babel？

在我们开始深入了解 Babel 之前，您需要了解一下什么是 Babel。Babel 是一个 JavaScript 编译器，它可以将 ECMAScript 2015+ 的代码转换为向后兼容版本的 JavaScript 代码。

为什么需要使用 Babel？

现代浏览器和 Node.js 已经支持大多数 ECMAScript 2015+ 功能。但是，如果您需要在旧版浏览器或使用旧版 Node.js 中运行应用程序，则需要使用 Babel 将代码转换为兼容版本。

另一个原因是，许多开发人员不想使用实验性功能。在这种情况下，Babel 可以将试验性功能转换为常规功能，以便在所有环境中运行应用程序。

如何使用 Babel？

安装

Babel 是一个 Node.js 包，您可以使用 npm 包管理器安装它。

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

这里我们同时安装了 @babel/preset-env，因为它是将代码转换为兼容版本所必需的插件之一。

配置

为了使用 Babel，您需要创建一个名为 .babelrc.json 的配置文件。您可以在此处指定要使用的插件和转换规则。以下是一个示例 .babelrc.json 文件。

{
  "presets": [
    "@babel/preset-env"
  ]
}

这里我们只指定了一个预设环境（preset-env），这是处理大多数情况所需的唯一预设。如果您有其他需要，可以在此处定义。

转换代码

一旦您安装了 Babel 并设置了配置文件，就可以使用命令行工具转换您的代码。以下是一个示例。

npx babel src --out-dir lib

这将在您的项目中创建一个名为 lib 的文件夹，并将 src 目录中的所有代码转换为兼容版本，并将其保存在 lib 目录中。

集成到构建系统中

如果您要构建复杂的应用程序，则可以将 Babel 集成到您的构建系统中。这就是为什么 Babel 是一个非常受欢迎的 JavaScript 编译器的原因之一。

使用 Webpack，您可以将 Babel 集成到您的构建过程中，如下所示：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

使用 Gulp，您可以使用 Gulp Babel 插件将代码转换为兼容版本。以下是一个示例。

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('babel', () => {
  return gulp.src('src/**/*.js')
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(gulp.dest('lib'));
});

总结

Babel 是一个非常有用的 JavaScript 编译器，它可以将 ECMAScript 2015+ 的代码转换为向后兼容的版本，以便在旧版浏览器或 Node.js 中运行应用程序。在本文中，我们详细了解了 Babel 的使用方法，并提供了示例代码来帮助您开始使用。我相信这篇文章可以帮助您了解 Babel 的基本概念并入门。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a460aaadd4f0e0ffca57d2