如何让ViteJS将类私有字段编译为兼容旧环境的代码？

类私有字段（#开头的方法/属性）是ES2022的特性，单纯设置Vite的build.target和TypeScript的compilerOptions.target为es2016不会自动转译这个语法——TS仅做类型检查，默认保留该语法输出，而@vitejs/plugin-legacy本身不负责语法转译，只处理旧浏览器polyfill。按以下步骤解决：

1. 安装依赖 #

需要引入Vite的Babel插件和处理私有字段的Babel插件：

npm install -D @vitejs/plugin-babel @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object

2. 配置Vite #

修改vite.config.js，添加Babel插件配置，同时配合legacy插件指定目标环境：

import { defineConfig } from 'vite'
import babel from '@vitejs/plugin-babel'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    babel({
      babelrc: false,
      plugins: [
        '@babel/plugin-proposal-private-methods',
        '@babel/plugin-proposal-private-property-in-object'
      ]
    }),
    legacy({
      targets: ['es2016']
    })
  ],
  build: {
    target: 'es2016'
  }
})

3. 调整TypeScript配置 #

修改tsconfig.json，关闭TS对类字段的新语义处理，确保Babel能正确转译：

{
  "compilerOptions": {
    "target": "es2016",
    "useDefineForClassFields": false, // 关键配置，让Babel接管私有字段转译
    "module": "ESNext",
    // 其他原有配置...
  }
}

完成以上配置后，重新执行vite build，类私有方法会被转译为ES2016兼容的代码。

内容的提问来源于stack exchange，提问作者LCB