babel 使用总结（新手必读）-JavaScript中文网-JavaScript教程资源分享门户

什么是 Babel

【Babel】是一个工具链，可以帮助我们将 JavaScript 代码转换成向下兼容的版本，以确保它们在不同的浏览器和环境下都能够运行。

Babel 的主要作用是将使用了 ES6/7/8 等新特性的 JavaScript 代码转换成浏览器可识别的代码，以便能够在旧版的浏览器中运行。

Babel 的优势

兼容性：Babel 可以将 ES6/7/8 的 JavaScript 代码转换成 ES5 的代码，从而保证代码在旧版浏览器上的正常运行。
插件化：Babel 可以通过插件实现诸如语法扩展、类型检查等功能，满足更多的需求。
可配置性：Babel 提供了一系列的配置选项以及功能强大的插件机制，使得我们能够自由地配置和扩展 Babel 的功能。

Babel 的安装

使用 npm 可以很方便地安装 Babel。

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

--save-dev 表示将 Babel 安装到我们的项目目录下，并且声明为开发依赖。

Babel 的配置

Babel 需要通过配置文件 babel.config.js 来指定要使用的 preset 和 plugin。

preset：Babel 的预设，分为两种，一种是针对特定环境的 preset，比如针对 node 环境的 '@babel/preset-env'，一种是针对语言的 preset，比如 '@babel/preset-react' 用来转化 React 中的 JSX。
plugin：Babel 的插件，主要用于处理特定的语法或者进行特定的转换，例如 'babel-plugin-transform-class-properties'，可以将 ES6 中的类属性转换成 ES5 的形式。

下面是一个简单的 babel.config.js 配置示例。

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: '58',
          ie: '11',
          safari: '11',
          firefox: '60'
        },
        useBuiltIns: 'usage'
      }
    ]
  ],
  plugins: ['@babel/plugin-transform-runtime']
};

这个配置文件的作用是将 ES6 代码转换成兼容性较好的 ES5 代码，同时通过 @babel/plugin-transform-runtime 解决一些运行时环境依赖问题。

Babel 的使用

Babel 可以通过命令行使用，也可以与 webpack 等构建工具配合使用。

命令行使用 Babel

使用命令行使用 Babel 需要先全局安装 Babel。

npm install -g @babel/cli

安装完成后，我们可以直接在命令行输入下面的命令将 ES6 代码转换成 ES5 代码。

babel src -d lib

通过 babel src -d lib 命令，我们可以将 src 目录下的所有 JavaScript 文件转换成 ES5 代码，并存储在 lib 目录下。

与 webpack 配合使用

对于前端开发来说，Babel 一般会和 webpack 等构建工具配合使用。Babel 提供了一个 webpack loader babel-loader，通过这个 loader 可以在 webpack 中集成 Babel。

安装 babel-loader。

npm install --save-dev babel-loader

在 webpack 的配置文件中加入以下代码即可。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

上述代码表示 webpack 在解析 JavaScript 代码时使用 babel-loader 进行预处理。

总结

Babel 是一个优秀的兼容性处理工具，在前端开发中有着非常重要的作用。本文介绍了 Babel 的基本功能、优势、安装和配置，以及在命令行和 webpack 中使用 Babel 的方法。对于刚刚接触 Babel 的新手来说，可以通过本文快速入门 Babel。

本文中的配置文件和命令行参数均为示例，具体配置需要根据自己的项目做出合适的调整。

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

babel 使用总结（新手必读）