Babel & Core-js 系统学习笔记

9
2025/6/25 ·
2025/6/25 ·
3 min ·
593 字
文章摘要
加载中...|
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

总览：学习阶段目录

阶段编号阶段名称学习重点概述
0Babel 演化史总览理解 v5 → v7 的演进与弃用点
1Babel CLI 入门安装 Babel、使用 CLI 转译语法
2preset-env 精通useBuiltIns、targets、corejs 原理与配置
3polyfill 模式解析使用 entry / usage、regenerator-runtime
4构建工具集成在 Vue CLI / Vite / Webpack 中集成 Babel
5自定义 Babel 插件开发AST 简介 + 编写 Babel 插件
6老项目迁移策略Babel v5/v6 项目如何升级与兼容

阶段 0：Babel 演化史

Babel 5.x（旧时代）

  • 内置预设，无需手动安装插件
  • 不支持插件系统
  • .babelrc 简单配置

Babel 6.x（插件时代）

  • 所有功能拆分为插件
  • 常用 preset：es2015, stage-2, react
  • 使用 babel-polyfill@6 + babel-runtime

Babel 7.x（现代化）

  • 改为 @babel/ 命名空间
  • 使用 @babel/preset-env 替代多个 preset
  • @babel/polyfill 被弃用（从 7.4 起）
  • 推出 core-js@3，支持 useBuiltIns: 'usage'

阶段 1：Babel CLI 入门实战

安装：

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

配置：

// babel.config.js
module.exports = {
  presets: ['@babel/preset-env']
};

编译命令：

npx babel src --out-dir dist

阶段 2：preset-env + polyfill 配置

依赖安装：

npm install core-js@3

配置方式 1：useBuiltIns: ‘usage’

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "usage",
    corejs: 3
  }]
]

配置方式 2：useBuiltIns: ‘entry’

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

babel.config.js:

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "entry",
    corejs: 3
  }]
]

阶段 3：polyfill 原理详解

功能项作用
core-js/stable引入 ECMAScript polyfills
regenerator-runtime/runtime支持 async/await
useBuiltIns控制注入方式：entry / usage

阶段 4：构建工具 Babel 配置

Vue CLI 项目：

vue create vue-babel-demo

修改 babel.config.js：

module.exports = {
  presets: [
    ["@vue/cli-plugin-babel/preset", {
      useBuiltIns: "usage",
      corejs: 3
    }]
  ]
};

阶段 5：编写 Babel 插件

示例：替换 console.log 为 console.warn

module.exports = function() {
  return {
    visitor: {
      CallExpression(path) {
        if (path.get("callee").matchesPattern("console.log")) {
          path.get("callee").replaceWithSourceString("console.warn");
        }
      }
    }
  };
};

阶段 6：老项目迁移实用手册

Babel 6.x 升级策略：

  • 替换 babel-preset-es2015 → @babel/preset-env
  • 删除 babel-polyfill，改为：
import 'core-js/stable';
import 'regenerator-runtime/runtime';
  • 升级 babel-core@6 → @babel/core@7

附加：调试技巧

  • debug: true 打印注入的 polyfill
  • 使用 npx browserslist 查看实际目标环境
  • 使用 npm ls core-js 检查版本冲突

留言讨论