muliminty note

前端工程化：Babel 入门教程

7分钟阅读

Babel 新手入门教程

Babel 是一个强大的 JavaScript 编译器，广泛用于将现代 JavaScript 代码（如 ES6、ES7）转译成兼容性更好的版本，确保代码能够在老旧浏览器或环境中运行。如果你刚接触前端开发，学习如何使用 Babel 能帮助你在开发过程中避免浏览器兼容性问题，同时提升代码质量。

1. Babel 是什么？

Babel 是一个 JavaScript 编译器，主要作用是将现代 JavaScript（如 ES6、ES7 及更高版本）转换为兼容大多数浏览器的 JavaScript 代码。Babel 使得开发者能够使用最新的 JavaScript 特性，而不用担心浏览器的兼容性问题。

2. 为什么需要 Babel？

随着 JavaScript 的不断更新，新的语法和功能（如箭头函数、类、模块化等）不断出现，但并不是所有浏览器都支持这些新特性。Babel 的作用就是让你能够在开发时使用这些新特性，同时确保最终生成的代码能在老旧浏览器上运行。

3. 安装 Babel

你可以通过 npm（Node.js 包管理器）来安装 Babel。以下是安装步骤：

3.1 安装 Babel 相关的依赖

在你的项目目录中，打开终端并运行以下命令：

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

解释：

  • @babel/core：Babel 的核心库，必须安装。
  • @babel/cli：提供命令行工具，可以通过命令行使用 Babel。
  • @babel/preset-env：智能选择需要转译的 ECMAScript 特性，基于目标环境自动决定需要的 polyfill 和转译功能。

3.2 安装 Babel 转译 React (可选)

如果你使用 React，可以额外安装 @babel/preset-react：

npm install --save-dev @babel/preset-react

4. 配置 Babel

Babel 的配置文件可以帮助你定义转译规则，通常我们会创建一个 .babelrc 或 babel.config.json 文件来配置 Babel。

4.1 创建 .babelrc 配置文件

在项目根目录下，创建一个名为 .babelrc 的文件，内容如下：

{
  "presets": ["@babel/preset-env"]
}
  • @babel/preset-env：根据目标环境自动选择转换功能。它会根据你指定的目标浏览器版本，决定哪些 JavaScript 特性需要转译。

4.2 Babel 配置 React（可选）

如果你正在使用 React，还需要在 .babelrc 配置文件中加入 @babel/preset-react：

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

5. 使用 Babel 转译代码

安装并配置 Babel 后，你就可以开始转译代码了。Babel 通过命令行工具提供了转译的功能。

5.1 转译单个文件

npx babel src --out-dir dist

这个命令会将 src 文件夹中的所有 .js 文件转译并输出到 dist 文件夹。

  • src：源代码文件夹。
  • dist：转译后的文件夹。

5.2 转译指定文件

你也可以指定具体的文件来进行转译：

npx babel src/index.js --out-file dist/index.js

6. Babel 与 Webpack 集成

在实际开发中，Babel 通常与 Webpack 等构建工具一起使用。Webpack 可以通过 babel-loader 自动处理文件的转译。

6.1 安装 babel-loader

npm install --save-dev webpack webpack-cli babel-loader

6.2 配置 Webpack

在 webpack.config.js 文件中，配置 Babel 加载器：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

这样，当你执行 Webpack 构建时，Webpack 会自动使用 Babel 转译你的 JavaScript 文件。

7. Babel 常用插件和 Presets

7.1 @babel/preset-env

@babel/preset-env 是 Babel 最常用的预设（preset）。它根据目标浏览器自动选择转译需要的 JavaScript 特性。

可以在 .babelrc 中进行配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "last 2 versions"
    }]
  ]
}
  • "targets": "last 2 versions"：指定支持最近两个版本的浏览器。

7.2 @babel/preset-react

如果你使用 React，@babel/preset-react 用于转译 JSX 语法。

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

7.3 @babel/plugin-transform-arrow-functions

如果你想将箭头函数转译为普通函数，可以使用此插件：

npm install --save-dev @babel/plugin-transform-arrow-functions

然后在 .babelrc 中添加插件配置：

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

8. Babel 与 Polyfill

有些 JavaScript 特性（如 Promise、Array.prototype.includes）在旧版浏览器中不被支持。Babel 提供了 core-js 库来填充这些缺失的特性。

8.1 安装 Polyfill

npm install core-js

8.2 在 Babel 配置中启用 Polyfill

通过在 .babelrc 中设置 useBuiltIns 和 corejs 选项，可以自动引入需要的 polyfill：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}
  • useBuiltIns: "usage"：根据代码中使用的功能，自动引入 polyfill。
  • corejs: 3：指定使用 core-js 的版本。

8.3 手动引入 Polyfill

你也可以手动引入 polyfill：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

9. Babel 常见错误与调试

在使用 Babel 时，可能会遇到一些常见的错误，以下是几种常见的解决方法：

  • SyntaxError: Unexpected token：检查是否忘记安装相应的 preset 或 plugin，或者你的 .babelrc 配置是否正确。
  • Error: Cannot find module ‘babel-core’：确保你安装了最新版本的 Babel，尤其是 @babel/core。
  • Module build failed：检查 webpack 配置和 babel-loader 是否正确配置。

10. 总结

Babel 是一个强大的工具，可以帮助开发者在开发过程中使用现代 JavaScript 语法，并确保代码在各种浏览器和环境中正常运行。

关系图谱