babel 是一个广泛的转码器， 可以把 es6/7 等最新语法转换成 es5 语法， 让浏览器兼容

babel的配置文件 .babelrc 主要有两个配置：

babel是如何把 es6代码转换成 es5代码的？

babel将es6代码转换成es5，主要有三个阶段；

注意事项：babel默认不转换的代码需要通过安装babelpolyfill来支持，比如 ：

如何写一个babel插件?

实现流程

补充

补充：Babel 是一个 JavaScript 编译器（又称 transpiler），主要用于把 ES6+ / TypeScript / JSX 等新语法转换为浏览器或 Node.js 兼容的旧语法。其配置文件通常是 .babelrc、babel.config.js 或 package.json 中的 babel 字段，主要由两部分组成：

  • presets（一组插件）：如 @babel/preset-env（按目标环境按需转换 ES 语法）、@babel/preset-react（JSX）、@babel/preset-typescript。
  • plugins（具体功能）：如 @babel/plugin-transform-runtime（减少辅助函数重复）、@babel/plugin-proposal-optional-chaining（可选链）。

Babel 工作流程：parse → transform → generate，即先把源码解析成 AST（@babel/parser），再通过插件遍历 AST（@babel/traverse）进行节点改写，最后由 @babel/generator 输出新代码。

Polyfill：Babel 只能转换语法，遇到 Promise、Array.from 等新 API 还需要 polyfill（core-js + regenerator-runtime）；现代做法是用 @babel/preset-env 配合 useBuiltIns: "usage" 自动按需引入。

手写一个 Babel 插件（把源码里所有 console.log 替换成 console.warn）：

module.exports = function ({ types: t }) {
  return {
    visitor: {
      CallExpression(path) {
        const callee = path.node.callee;
        if (
          t.isMemberExpression(callee) &&
          t.isIdentifier(callee.object, { name: 'console' }) &&
          t.isIdentifier(callee.property, { name: 'log' })
        ) {
          callee.property = t.identifier('warn');
        }
      }
    }
  };
};

把上述代码放到 babel.config.js 或单独文件后，在 plugins 中引入即可在编译时生效。

来源整理自：我的有道云笔记