【babel】babel 攻略

babel 攻略

相关文章

babel 攻略

一、什么是Babel

Babel是一个广泛使用的JavaScript编译器，用于将新版本的JavaScript代码转换为向后兼容的旧版本，以便在不同的浏览器或环境中运行。它提供了一种将高版本的JavaScript语法转换为低版本语法的工具，从而使开发者能够利用最新的JavaScript语言特性而不必担心兼容性问题。

二、Babel主要功能和特性

语法转换（Syntax Transformation）：Babel可以将使用新版JavaScript语法编写的代码，如ES6/ES2015、ES7/ES2016等，转换为向后兼容的ES5语法，以便在不支持新语法特性的浏览器中运行。
源码转换（Source Code Transformation）：除了语法转换外，Babel还支持对代码进行源码转换，例如将JSX转换为普通的JavaScript函数调用，或者将TypeScript转换为JavaScript。
插件系统（Plugin System）：Babel具有高度可扩展性的插件系统，允许开发者根据自己的需求定制转换过程。Babel本身只提供了一些基本的转换规则，而大部分功能都是通过插件实现的。
预设（Presets）：Babel预设是一组预定义的插件集合，可以一次性加载多个常用的插件，以简化配置。例如，@babel/preset-env可以根据目标环境自动选择需要的转换规则。
平台无关性（Platform Agnostic）：Babel不仅可以用于在浏览器中转换JavaScript代码，还可以用于Node.js、React Native等平台。它具有平台无关性，可以在不同的环境中运行。
实验性功能支持（Experimental Feature Support）：Babel还支持转换实验性的JavaScript功能，如提案中的语言特性。开发者可以使用Babel来尝试和实验新的JavaScript语法功能。

三、.babelrc配置

presets

用于指定要使用的预设插件集合。你可以将多个预设插件列表在这里配置，以便Babel按顺序应用。例如：

1
2
3

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

plugins

用于指定要使用的单个Babel插件或插件集合。与presets类似，你也可以在这里配置多个插件，以便Babel按顺序应用。例如：

1
2
3

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

env

用于根据不同的环境配置不同的Babel选项。例如，你可以根据development、production等不同的环境配置不同的预设、插件等。例如：

{
  "env": {
    "development": {
      "presets": ["@babel/preset-env"],
      "plugins": ["@babel/plugin-transform-react-jsx-source"]
    },
    "production": {
      "presets": ["@babel/preset-env", ["minify", { "builtIns": false }]]
    }
  }
}

ignore

用于指定不需要进行Babel转换的文件或者目录。例如：

1
2
3

{
  "ignore": ["node_modules", "dist"]
}

sourceMaps

用于开启或关闭生成源映射。默认为 false。例如：

1
2
3

{
  "sourceMaps": true
}

四、presets配置

在 Babel 中，预设（presets）是一种打包了一组 Babel 插件的工具，它们可以方便地进行一系列的代码转换。预设可以理解为一组插件的集合，它们被组合在一起以实现特定的转换需求。

@babel/preset-env

用于根据目标环境自动确定需要的转换规则，以兼容目标环境中缺失的新语法特性。它的配置选项包括：

targets：用于指定目标环境。可以是一个对象、一个字符串或者一个数组。详细配置方法请参考前面提到的回答。
modules：用于指定转换模块的类型。可以设置为 “auto”、”amd”、”umd”、”systemjs” 或 “commonjs”。
useBuiltIns：用于指定是否在编译时自动导入所需的 polyfill。可以设置为 true 或者 “usage”。
corejs：用于指定使用的 core-js 版本。默认值为 2。
debug：用于开启调试模式。

{
  // 定义要使用的预设插件集合
  "presets": [
    // 配置 @babel/preset-env 预设插件，并提供配置选项
    [
      "@babel/preset-env",
      {
        // 指定目标环境
        "targets": {
          // 指定浏览器目标为最近的两个版本
          "browsers": "last 2 versions",
          // 指定 Node.js 目标为当前版本
          "node": "current"
        },
        // 设置为 false 表示不转换模块语法
        "modules": false,
        // 根据代码中实际使用到的特性导入相应的 polyfill
        "useBuiltIns": "usage",
        // 指定使用的 core-js 版本为 3
        "corejs": 3
      }
    ]
  ]
}

targets

数组：你可以使用一个包含字符串的数组来指定多个目标环境。例如：

1	`"targets": ["last 2 versions", "ie >= 11"]`

这样配置将会兼容市场占有率前两位的浏览器版本以及IE11及以上版本。

对象：你可以使用一个对象来指定更详细的目标环境配置，其中可以包含浏览器、Node.js版本等信息。例如：

"targets": {
  "chrome": "58",
  "firefox": "60",
  "ie": "11",
  "node": "10"
}

这样配置将会兼容 Chrome 58、Firefox 60、IE 11，以及 Node.js 10。

ES模块：你可以使用 esmodules: true 来设置目标环境为支持ES模块的环境。例如：

1
2
3

"targets": {
  "esmodules": true
}

这样配置将会针对支持ES模块的环境进行转换。

useBuiltIns

useBuiltIns 是 @babel/preset-env 的一个配置选项，用于控制是否在编译时自动导入所需的 polyfill。它有三种配置方式：false、true 和 “usage”。

false：
- 表示不使用任何 polyfill 自动导入机制。
- 使用此配置时，你需要手动导入需要的 polyfill 或者在全局环境中引入 polyfill（例如通过 <script> 标签）。
true：
- 表示根据配置的目标环境导入所有需要的 polyfill。
- 使用此配置时，Babel 会根据目标环境自动导入所需的 polyfill，无需手动导入。
“usage”：
- 表示根据代码中实际使用到的特性导入相应的 polyfill。
- 使用此配置时，Babel 会根据你的代码中实际使用到的特性，只导入所需的 polyfill，避免导入不必要的代码。

corejs

corejs 是 @babel/preset-env 的一个配置选项，用于指定使用的 core-js 版本。当 useBuiltIns 设置为 “usage” 时才会生效，它有两种配置方式：2 和 3。

2：
- 表示使用 core-js@2 版本。
- core-js@2 是 Babel 7 默认使用的版本，如果不指定 corejs 参数，默认使用 core-js@2。
3：
- 表示使用 core-js@3 版本。
- core-js@3 是 core-js 的最新版本，它包含了 ES6、ES7、ES8 等 ECMAScript 的最新特性以及一些 Stage 4 的提案。

@vue/cli-plugin-babel/preset

是 Vue CLI 提供的 Babel 预设插件，用于在 Vue 项目中使用 Babel 进行代码转换。Vue CLI 是一个基于 Vue.js 进行快速开发的脚手架工具，它内置了一系列的插件来提供现代化的开发体验和开箱即用的特性。

具体来说，@vue/cli-plugin-babel/preset 插件的作用是配置 Babel 的转换规则和插件，以便在 Vue 项目中使用最新的 JavaScript 语法和功能。它默认包含了一些常见的 Babel 插件，用于转换 Vue 单文件组件、ES6+ 语法、JSX 语法等，以便在不同的环境中运行和部署 Vue 项目。

@babel/preset-react

用于转换React应用中的JSX语法。

@babel/preset-typescript

用于转换TypeScript代码为JavaScript。

@babel/preset-stage-0 到 @babel/preset-stage-4

这些预设分别表示不同阶段的JavaScript提案，从Stage 0到Stage 4，每个阶段代表了不同程度的标准化程度。一般来说，随着提案从Stage 0到Stage 4的推进，相应的特性越来越稳定，因此使用较低阶段的预设可能包含更多实验性的语言特性。

五、plugins配置

在Babel中，插件（plugins）用于对 JavaScript 代码进行转换。Babel 的核心功能是将 ECMAScript 2015+ 的代码转换成向后兼容的 JavaScript 代码，以便在现有的 JavaScript 引擎中运行。插件负责实际的代码转换工作，它们可以对代码进行语法转换、语义转换甚至是功能增强等操作。

为什么有了 @babel/preset-env转换语法还需要用插件继续转换

虽然 @babel/preset-env 是一个非常强大的预设插件，可以根据目标环境自动确定需要的转换规则，但有时候仍然需要使用插件来进一步定制和优化代码转换。以下是一些常见的情况：

特定语法转换：@babel/preset-env 默认只包含了与环境兼容性相关的转换规则，对于一些特定的语法转换，可能并不包含在预设中。例如，一些新的 JavaScript 提案语法可能还没有被纳入到 @babel/preset-env 中，这时就需要使用相应的插件来实现转换。
功能增强：有些插件提供了对 JavaScript 功能的增强，这些功能在 @babel/preset-env 中并不涵盖。例如，装饰器语法、可选链操作符等功能可以通过插件来实现。
性能优化：有时候，通过手动选择并配置特定的插件，可以避免不必要的转换和额外的代码引入，从而提高编译性能和输出代码的质量。
个性化需求：有些项目可能有特定的代码转换需求，这时候可以通过选择和配置插件来满足个性化需求，而不是仅依赖于 @babel/preset-env 的默认转换规则。

常用的 Babel 插件

@babel/plugin-transform-arrow-functions：将箭头函数转换成普通函数，以提供向后兼容性。
@babel/plugin-transform-classes：将类转换为构造函数，以提供向后兼容性。
@babel/plugin-transform-destructuring：将解构赋值语法转换成普通赋值语法，以提供向后兼容性。
@babel/plugin-transform-modules-commonjs：将 ES6 模块转换成 CommonJS 模块，以便在 Node.js 环境中使用。
@babel/plugin-transform-runtime：将代码中使用到的新特性转换成对 core-js 和 regenerator-runtime 的引用，以减小转换后代码的体积。
@babel/plugin-proposal-class-properties：实现类属性的支持，包括静态属性和实例属性。
@babel/plugin-proposal-object-rest-spread：实现对象的展开和剩余参数的支持。
@babel/plugin-syntax-dynamic-import：实现动态导入语法的支持，使得可以在代码中使用 import() 方法动态加载模块。
@babel/plugin-syntax-jsx：实现 JSX 语法的支持，使得可以在代码中使用 JSX 语法编写 React 组件。
@babel/plugin-transform-react-jsx：将 JSX 语法转换成普通的 JavaScript 代码，以提供向后兼容性。

六、@babel/parser

@babel/parser 是 Babel 提供的一个 JavaScript 解析器，用于将 JavaScript 代码解析成抽象语法树（AST）。AST 是一种树状数据结构，用于表示代码的抽象语法结构，可以方便地进行代码分析、转换和生成。

主要功能
- 解析 JavaScript 代码：@babel/parser 可以将 JavaScript 代码解析成抽象语法树（AST），包括识别代码中的关键字、标识符、操作符、语句、表达式等语法结构，并构建相应的 AST。
- 支持最新语法：@babel/parser 支持解析最新版本的 ECMAScript 语法，包括 ES6、ES7、ES8 等版本中引入的新特性和语法规则。
- 可定制性：@babel/parser 允许通过配置选项来控制解析过程，例如可以配置是否启用特定的语法扩展或插件，从而满足不同项目的需求。
使用方法
- 安装：可以通过 npm 或 yarn 安装 @babel/parser：
1
npm install --save @babel/parser
- 导入：在项目中使用时，需要将 @babel/parser 导入到代码中：
1
import { parse } from '@babel/parser';
- 解析代码：使用 parse 函数将 JavaScript 代码解析成 AST，该函数接受一个 JavaScript 代码字符串作为参数，并返回解析后的 AST 对象：
1
2
const code = "const greeting = 'Hello, world!';"; const ast = parse(code);

七、@babel/traverse

@babel/traverse 是 Babel 提供的一个用于遍历和修改 AST（抽象语法树）的工具模块。它允许开发者对 AST 进行深度优先遍历，并提供了一系列的 API，用于访问、查询和修改 AST 中的节点，从而实现对代码结构的分析、转换和生成。

主要功能
- 遍历 AST：@babel/traverse 提供了一系列的遍历方法，包括深度优先遍历和广度优先遍历，用于访问 AST 中的每个节点。
- 节点访问：通过遍历 AST，开发者可以访问每个节点，并获取节点的类型、属性和值等信息。@babel/traverse 提供了访问节点的 API，例如 path.node.type、path.node.value 等。
- 节点查询：除了遍历访问外，@babel/traverse 还提供了查询节点的 API，可以根据节点的类型、属性、值等信息来查询满足条件的节点。
- 节点修改：通过遍历 AST，开发者可以对节点进行修改，例如修改节点的属性、替换节点等操作。@babel/traverse 提供了修改节点的 API，例如 path.node.property = newValue、path.replaceWith(newNode) 等。

使用方法

安装：可以通过 npm 或 yarn 安装 @babel/traverse：

1	`npm install --save @babel/traverse`

导入：在代码中导入 @babel/traverse 模块：

1	`const traverse = require('@babel/traverse').default; // 注意：由于 Babel 7 的导入方式，需要使用 .default 导出默认对象`

遍历 AST：使用 traverse 函数对 AST 进行遍历，并传入遍历器对象（visitor）来定义遍历过程中的行为：

traverse(ast, {
  enter(path) {
    // 处理节点进入时的逻辑
  },
  exit(path) {
    // 处理节点离开时的逻辑
  }
});

八、@babel/generator

@babel/generator 是 Babel 提供的一个模块，用于将 AST（抽象语法树）转换为 JavaScript 代码字符串。它负责将经过转换后的 AST 对象输出为可执行的 JavaScript 代码，并提供了一系列选项来定制输出的代码格式。

主要功能：
- AST 转换：@babel/generator 接受一个经过转换后的 AST 对象作为输入，将其转换为 JavaScript 代码字符串。
- 代码生成：生成的 JavaScript 代码字符串可以用于直接执行、存储或传递给其他工具进行后续处理。
- 代码格式定制：@babel/generator 提供了一系列选项，可以定制输出代码的格式，包括缩进、分号、引号等。

使用方法

安装：可以通过 npm 或 yarn 安装 @babel/generator：

1	`npm install --save @babel/generator`

导入：在代码中导入 @babel/generator 模块：

1	`const generator = require('@babel/generator').default; // 注意：由于 Babel 7 的导入方式，需要使用 .default 导出默认对象`

生成代码：使用 generator 函数将经过转换后的 AST 对象转换为 JavaScript 代码字符串：

1
2
3

const ast = /* 经过转换后的 AST 对象 */;
const { code, map } = generator(ast, { /* options */ });
console.log(code);

九、@babel/core

@babel/core 是 Babel 工具链中最核心的模块之一，负责整个 Babel 转换过程的管理和执行。它提供了一系列的 API，用于配置、加载插件和预设、解析和转换源代码，以及生成目标代码。

主要功能
- 转换源代码：@babel/core 负责将输入的源代码转换成目标代码。它接受源代码字符串作为输入，并应用一系列的转换规则（插件和预设），最终生成转换后的目标代码字符串。
- 配置管理：@babel/core 提供了丰富的配置选项，用于配置转换过程中的各种行为，包括指定转换规则、配置插件和预设、设置输出选项等。
- 插件管理：@babel/core 负责管理和调度 Babel 插件的加载和应用。它会根据配置中指定的插件列表，加载并应用相应的插件，以完成特定的代码转换任务。
- 源代码解析：@babel/core 负责解析输入的源代码，并将其转换成抽象语法树（AST）。它使用 @babel/parser 模块来进行源代码的解析，将源代码解析成 AST 后，再根据配置应用转换规则。
- 目标代码生成：@babel/core 在应用转换规则后，负责将转换后的 AST 重新生成目标代码字符串。它使用 @babel/generator 模块来进行目标代码的生成，将转换后的 AST 转换成目标代码字符串。
使用方法
- 安装：可以通过 npm 或 yarn 安装 @babel/core：
1
npm install --save-dev @babel/core
- 配置：在项目中配置 .babelrc 文件或者在 babel.config.js 文件中配置 Babel 的转换规则、插件和预设等选项。
- 调用 API：在代码中使用 @babel/core 提供的 API，例如 transform 函数，来执行 Babel 的转换任务：
1
2
3
const babel = require('@babel/core'); const code = "const greeting = 'Hello, world!';"; const transformedCode = babel.transform(code, options);