关于babel的配置

项目中 .babelrc 的配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
  ]
}

.babelrc 文件的作用

.babelrc 是Babel转译器的配置文件（“rc”代表“run commands”），主要用于：

1. 指定JS diamanté的转译规则：告诉Babel如何将新版JS（ES6+）代码转换为向后兼容的版本
2. 配置插件和预设：定义使用哪些Babe插件和预设（presets）来处理代码
3. 控制转译过程：可以针对特定环境或条件进行不同的转译配置

对于Babel配置详解

presets

@babel/preset-env：是一个智能预设，会根据配置的目标环境自动确定需要的Babel插件和polyfill

plugins

• @babel/plugin-syntax-dynamic-import: 支持动态 import() 语法
• @babel/plugin-syntax-import-meta: 支持 import.meta 语法（常用于获取模块信息）
• • import.meta是一个在ECMAScript模块中可用的元属性，它提供了关于当前模块的元信息，这个特性是 ES2020 标准中引入的
• • 基本语法
• • • import.meta
• • • 获取当前模块的URLimport.meta
• • • 在浏览器中获取脚本的URL const baseUrl = new URL('./', import.meta.url);
• @babel/plugin-proposal-class-properties: 支持类的属性语法（如 class A { prop = value; }）
• @babel/plugin-proposal-decorators: 支持装饰器语法（配置为 "legacy": true 使用旧版装饰器语法）
• @babel/plugin-proposal-json-strings: 支持 JSON 字符串中的特殊字符
• • 没有插件时：const badString = "这是 一行"; // 可能报 SyntaxError
• • 必须手动转译：const safeString = "这是\u2028一行"; // 正确，但可读性差
• • 使用插件后：// 直接使用特殊字符，Babel 会正确处理 const str = "这是
一行"; // 正常编译
• @babel/plugin-proposal-function-sent: 支持生成器函数中的 function.sent 元属性
• • 专门用于生成器函数中，允许访问通过 next() 方法传入生成器的第一个值。
• @babel/plugin-proposal-export-namespace-from: 支持 export * as ns from "mod" 语法
• @babel/plugin-proposal-numeric-separator: 支持数字分隔符（如 1_000_000）
• @babel/plugin-proposal-throw-expressions: 支持在表达式中抛出异常
• • 用于支持 表达式位置抛出异常 的语法（目前是 ECMAScript 提案 Stage 2 阶段）。它允许你在原本只能写表达式的地方（如箭头函数、三元表达式等）直接使用 throw，而不必改写为语句形式。
• @babel/plugin-proposal-export-default-from: 支持 export v from "mod" 语法