【日常记录】【JS】@babel/core @babel/polyfill @babel/preset-env core-js 介绍

news2025/1/25 4:38:06

文章目录

- 1、介绍
- - 1.1 @babel/core
  - 1.2 @babel/polyfill
  - 1.3 @babel/preset-env
- 2、基本使用
- 3、参考链接

1、介绍

1.1 @babel/core

@babel/core 是 Babel 编译器的核心模块，它是 Babel 工具链的核心组件之一。Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+（ES6+）的代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版的浏览器或环境中运行。

@babel/core 模块负责实现 Babel 编译器的核心功能，包括词法分析、语法分析、转换和代码生成等。它提供了一个 API，使得开发者可以在自己的项目中集成 Babel，从而定制化地配置 JavaScript 代码的编译过程。
通过 @babel/core，开发者可以使用 Babel 提供的各种插件和预设（Presets）来实现不同的转换和编译需求。这些插件和预设可以帮助开发者在项目中使用最新的 JavaScript 特性，同时确保生成的代码在目标环境中能够正常运行。
总之，@babel/core 是 Babel 编译器的核心模块，提供了基本的编译功能和 API，使得开发者可以通过 Babel 对 JavaScript 代码进行灵活的转换和编译。

1.2 @babel/polyfill

在这里插入图片描述

@babel/polyfill 是 Babel 提供的一个包，用于在目标环境中模拟 ES6+ 特性的缺失。它的主要作用是为目标环境提供缺失的 ES6+ 功能和实例方法，以便你可以在所有环境中使用新的语言特性，而不必担心兼容性问题。

当你使用一些新的 ES6+ 特性时（例如 Promise、Map、Set 等），在一些旧版本的浏览器或环境中可能会遇到兼容性问题。这时候，你可以使用 @babel/polyfill 来填补这些缺失，使得你的代码可以在目标环境中正常运行。

1.3 @babel/preset-env

在这里插入图片描述

翻译一下就是：@babel/preset-env是一个智能预设，允许您使用最新的JavaScript，而无需微观管理目标环境所需的语法转换（以及可选的浏览器polyfill）。这既让你的生活更轻松，也让JavaScript捆绑包更小！

大白话就是：他已经配置好了一些常用配置，你可以直接用，不需要一个一个的配置

主要配置包含以下：
在这里插入图片描述

2、基本使用

1、先准备一个代码片段

const abc = 1;
const fn = (name) => {
  console.log(name);
};

new Promise((resolve, reject) => {
  resolve(1);
});

[1, 2, 3].reduce((pre, cur) => {
  return pre + cur;
}, 0);

2、安装

npm i @babel/core  # 安装 @babel/core

transformSync ：同步方法
babel.transformSync(code: string, options?: Object)
参数1：代码片段
参数2：配置项 options 配置项官方文档

这个方法返回值是一个对象，对象里面有一个code 是转化完成后的代码

import { transformSync } from "@babel/core";
import presetEnv from "@babel/preset-env";
import fs from "fs";

let code = fs.readFileSync("./code.js", "utf-8");
console.log(
  transformSync(code).code
);

在这里插入图片描述
目前毫无变化，是因为没有配置，options 是配置如何转化的

npm i @babel/preset-env # 安装这个预设

在这里插入图片描述
这个时候可以发现 babel/core 、@babel/preset-env 目前只是转的语法（let const 箭头函数、for of 等等，具体可以看这个 @babel/preset-env文档）

这些 promise 、reduce 等等这些高级的函数，可能有的地方，不支持，导致无法运行，这个时候就需要 @babel/polyfill

npm install --save @babel/polyfill

import { transformSync } from "@babel/core";
import presetEnv from "@babel/preset-env";
import fs from "fs";

let code = fs.readFileSync("./code.js", "utf-8");
console.log(
  transformSync(code, {
    presets: [
      [
        presetEnv,
        {
          useBuiltIns: "usage",
          corejs: 3,
        },
      ],
    ],
  }).code
);

如果没有设置 corejs:3,会有以下错误
在这里插入图片描述

警告（@babel/preset-env）：我们注意到您在使用“useBuiltIns”选项时没有声明核心js版本。目前，当没有版本通过时，我们假设版本为2.x。由于这个默认版本可能会在未来的Babel版本中更改，我们建议通过“corejs”选项显式设置您正在使用的core-js版本。
您还应该确保传递给“corejs”选项的版本与“package.json”的“dependencies”部分中指定的版本匹配。如果没有，则需要运行以下命令之一：

在这里插入图片描述