babel核心库

Babel 核心库

@babel/core、@babel/cli 和 @babel/preset-env 是 Babel 生态系统中的核心组件，用于实现 JavaScript 代码的转换和编译。

@babel/core： @babel/core 是 Babel 的核心模块，提供了 Babel 的转换功能。它负责整个转换过程的核心逻辑，包括将源码解析成 AST、应用插件对 AST 进行转换、以及将转换后的 AST 生成目标代码等功能。通常情况下，我们需要在项目中安装 @babel/core。
@babel/cli： @babel/cli 是 Babel 的命令行工具，提供了一组命令用于在命令行中使用 Babel 进行代码转换。通过 @babel/cli，我们可以在终端中使用 Babel 对单个文件或整个目录进行转换。它依赖于 @babel/core，因此在使用之前需要先安装 @babel/core。
@babel/preset-env： @babel/preset-env 是一个 Babel 预设（preset），它包含了一系列的 Babel 插件，用于将最新版本的 JavaScript 代码转换为向后兼容的代码。@babel/preset-env 根据配置的目标环境和浏览器兼容性要求，自动确定需要应用的转换规则，从而实现最小化的转换。通常情况下，我们可以通过配置 Babel 配置文件（如 .babelrc 或 babel.config.js）来使用 @babel/preset-env。

@babel/core

@babel/core 是 Babel 生态系统中最核心的模块之一，它负责整个 Babel 转换流程中的核心功能，包括将源代码解析成抽象语法树（AST）、应用插件对 AST 进行转换、以及将转换后的 AST 重新生成为代码等。

代码解析（Parsing）： @babel/core 使用 @babel/parser 模块来将源代码解析成抽象语法树（AST）。@babel/parser 是 Babel 的官方解析器，它能够将 JavaScript 代码解析成符合 ECMAScript 规范的 AST。解析过程中，会识别代码中的关键字、标识符、操作符等元素，并将它们组装成一棵树状结构，以便后续的转换操作。
插件应用（Plugin Application）： @babel/core 负责将解析后的 AST 传递给配置的插件，并调用插件对 AST 进行转换。插件是 Babel 的核心组件之一，它们负责实际的代码转换工作。在转换过程中，每个插件都可以对 AST 进行各种操作，例如添加、修改或删除节点，以实现不同的转换需求。@babel/core 会根据配置的插件列表，依次调用插件对 AST 进行转换，并将转换后的 AST 返回。
代码生成（Code Generation）：经过插件转换后的 AST 会被 @babel/core 重新生成为 JavaScript 代码。@babel/generator 模块负责将 AST 转换为代码字符串，并输出转换后的代码。在生成代码的过程中，Babel 会根据一定的格式化规则，将 AST 中的节点转换为相应的代码片段，并按照语法规范进行格式化，生成最终的代码输出。
转换配置（Transformation Configuration）：在使用 @babel/core 进行转换时，通常需要提供一个 Babel 配置文件，用于配置转换的规则和插件列表。这个配置文件可以是 .babelrc、babel.config.js 或 package.json 中的 babel 字段。配置文件中可以指定需要使用的插件、预设以及其他转换选项，以定制化地配置 Babel 转换流程。

const babel = require('@babel/core');

// 1. 源码解析
const sourceCode = `
  const add = (a, b) => a + b;
  console.log(add(2, 3));
`;

// 2. Babel 配置
const options = {
  presets: ['@babel/preset-env']
};

// 3. AST 解析
const ast = babel.parse(sourceCode, options);

// 4. 插件应用
babel.traverse(ast, {
  enter(path) {
    // 在 AST 节点遍历过程中，对节点进行转换
    if (path.isArrowFunctionExpression()) {
      // 将箭头函数转换为普通函数
      path.node.type = 'FunctionDeclaration';
      // 修改函数名称
      path.node.id = { type: 'Identifier', name: 'add' };
    }
  }
});

// 5. 代码生成
const { code } = babel.transformFromAst(ast, sourceCode, options);

console.log(code);

上述示例中，我们首先定义了一个源码字符串 sourceCode，然后配置了 Babel 的预设选项 options。接着，我们通过 babel.parse 方法将源码解析成 AST，并通过 babel.traverse 方法遍历 AST，应用插件进行转换。在遍历过程中，我们将箭头函数转换为普通函数。最后，我们使用 babel.transformFromAst 方法将修改后的 AST 重新生成为代码字符串，并输出到控制台。

@babel/preset-env

@babel/preset-env 是 Babel 的一个预设（preset），它允许你根据目标环境自动确定需要的转换，从而实现更智能、更高效的代码转换。

智能目标环境转换：

@babel/preset-env 可以根据你指定的目标环境（或者根据浏览器列表）来自动确定需要的转换。它会根据目标环境的特性和支持程度，选择性地应用转换，以尽可能保留源代码的特性和性能。

模块转换：

在支持 ES6 模块的环境下，@babel/preset-env 会将 ES6 模块转换为 CommonJS、AMD、UMD 或者 SystemJS 格式，以确保代码能够在不同环境中正常运行。

根据浏览器版本进行转换：

可以直接指定要支持的浏览器版本，@babel/preset-env 将根据指定的浏览器版本来确定需要的转换。

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }]
  ]
}

模块排除

如果你正在使用其他构建工具（如 webpack 或 Rollup），它们已经提供了模块化支持，你可以将模块转换排除在外，避免重复转换。

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

Babel 核心库​

@babel/core​

@babel/preset-env​

Babel 核心库

@babel/core

@babel/preset-env