跳至主要內容

Babel 配置

yzqdev2026/7/15小于 1 分钟

Babel 配置

简介

Babel 是一个 JavaScript 编译器，用于将现代 JS/TS 代码转换为向下兼容的版本。

安装

npm install -D @babel/core @babel/cli @babel/preset-env

配置文件

babel.config.json（推荐，项目级别）

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "edge": "17",
        "firefox": "60",
        "chrome": "67",
        "safari": "11.1"
      },
      "useBuiltIns": "usage",
      "corejs": "3.6.5"
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

babel.config.js（动态配置）

module.exports = function (api) {
  api.cache(true);

  const presets = [
    ['@babel/preset-env', { targets: { browsers: ['last 1 version'] } }],
    '@babel/preset-typescript',
  ];
  const plugins = ['@babel/plugin-transform-runtime'];

  return { presets, plugins };
};

常用 Presets

Preset用途
@babel/preset-env根据目标环境自动转换 JS 语法
@babel/preset-react支持 JSX 语法
@babel/preset-typescript支持 TypeScript
@babel/preset-flow支持 Flow 类型

常用 Plugins

Plugin用途
@babel/plugin-transform-runtime复用辅助函数，减少打包体积
@babel/plugin-proposal-decorators支持装饰器语法
@babel/plugin-proposal-class-properties支持类属性
babel-plugin-module-resolver模块路径别名

与 Webpack 集成

module.exports = {
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime'],
          },
        },
      },
    ],
  },
};

与 React 集成

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

参考