跳到主要内容

Babel

Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本，以便能够运行在当前和旧版本的浏览器或其他环境中。

1. 基础配置​

1.1 安装​

# 核心包
npm install --save-dev @babel/core @babel/cli @babel/preset-env

# React 支持
npm install --save-dev @babel/preset-react

# TypeScript 支持
npm install --save-dev @babel/preset-typescript

1.2 配置文件​

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          node: "current",
          browsers: [">0.25%, not dead"]
        },
        useBuiltIns: "usage",
        corejs: 3
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
};

2. 核心概念​

2.1 Presets（预设）​

// 常用预设
{
  "presets": [
    // 基础预设
    "@babel/preset-env",
    
    // React 预设
    ["@babel/preset-react", {
      "runtime": "automatic",
      "development": process.env.NODE_ENV === "development",
    }],
    
    // TypeScript 预设
    ["@babel/preset-typescript", {
      "isTSX": true,
      "allExtensions": true,
    }]
  ]
}

2.2 Plugins（插件）​

{
  "plugins": [
    // 类属性转换
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    
    // 运行时转换
    ["@babel/plugin-transform-runtime", {
      "corejs": 3,
      "helpers": true,
      "regenerator": true,
    }],
    
    // 装饰器支持
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ]
}

3. 高级特性​

3.1 自定义插件​

// 自定义 Babel 插件
module.exports = function(babel) {
  const { types: t } = babel;
  
  return {
    name: "custom-transform",
    visitor: {
      // 转换函数声明
      FunctionDeclaration(path) {
        // 转换逻辑
      },
      
      // 转换类声明
      ClassDeclaration(path) {
        // 转换逻辑
      }
    }
  };
};

3.2 Polyfill 配置​

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", {
      useBuiltIns: "usage", // 按需导入
      corejs: 3,
      targets: {
        chrome: "58",
        ie: "11"
      }
    }]
  ]
};

// 入口文件
import "core-js/stable";
import "regenerator-runtime/runtime";

3.3 编译优化​

{
  "presets": [
    ["@babel/preset-env", {
      // 模块保持原样，交给打包工具处理
      "modules": false,
      
      // 指定目标环境
      "targets": {
        "browsers": [
          "last 2 versions",
          "safari >= 7"
        ]
      },
      
      // 排除不需要的 polyfill
      "exclude": ["transform-regenerator"]
    }]
  ],
  "env": {
    "test": {
      // 测试环境特定配置
      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
    }
  }
}

4. 与构建工具集成​

4.1 Webpack 集成​

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript"
            ],
            cacheDirectory: true
          }
        }
      }
    ]
  }
};

4.2 Vite 集成​

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    // 禁用 esbuild 的 JavaScript 转换
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  },
  plugins: [
    // 使用 @vitejs/plugin-react 替代 Babel
    // 或自定义 Babel 配置
  ]
});

5. 最佳实践​

5.1 性能优化​

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", {
      // 避免重复转换
      "loose": true,
      
      // 减少 polyfill 大小
      "useBuiltIns": "usage",
      "corejs": 3,
      
      // 指定具体目标，减少不必要的转换
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  plugins: [
    // 使用 transform-runtime 避免全局污染
    ["@babel/plugin-transform-runtime", {
      "corejs": 3,
      "helpers": true,
      "regenerator": true,
      "useESModules": true
    }]
  ],
  // 缓存配置
  "cacheDirectory": true
};

5.2 调试配置​

// babel.config.js
module.exports = {
  // 源码映射
  sourceMaps: "both",
  
  // 保留注释
  comments: true,
  
  // 开发环境配置
  env: {
    development: {
      presets: [
        ["@babel/preset-react", {
          development: true,
          // 保留 prop-types
          "runtime": "classic"
        }]
      ]
    }
  }
};

5.3 常见问题处理​

  1. 处理动态导入
{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}
  1. 处理特定语法
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      },
      "modules": false
    }]
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

6. 工具链​

6.1 CLI 使用​

# 编译文件
babel script.js --out-file script-compiled.js

# 监听文件变化
babel script.js --watch --out-file script-compiled.js

# 编译整个目录
babel src --out-dir lib

# 忽略特定文件
babel src --out-dir lib --ignore "src/**/*.spec.js"

6.2 配置检查​

# 检查配置是否正确
npx babel --help

# 查看特定文件的转换结果
npx babel script.js --out-file script-compiled.js --source-maps

参考资源​