如何用Rollup在TypeScript转译前替换代码，将私有类字段转成ES5

问题出在**@rollup/plugin-replace默认只处理JS类文件，不会扫描TS文件**，所以你的替换规则对.mts源码完全没生效，TS编译器还是按原生私有字段#foo的逻辑转译成了WeakMap实现。

修复步骤 #

修改Rollup配置，给replace插件添加include选项，指定处理TS文件，同时保持replace在typescript插件之前执行：

// rollup.config.mjs
import replace from '@rollup/plugin-replace'
import typescript from '@rollup/plugin-typescript'
export default {
  input: './src/index.mts',
  output: {
    file: './dist/index.js',
    format: 'iife'
  },
  plugins: [
    replace({
      ' #': ' private _',
      '.#': '._',
      delimiters: ['', ''],
      // 新增：指定处理TS/TS模块文件
      include: ['./src/**/*.ts', './src/**/*.mts']
    }),
    typescript({compilerOptions: {target: 'es5'}})
  ]
}

优化替换规则（可选） #

如果你的代码里有换行后直接写#foo的场景（比如类字段前只有换行和缩进），可以改用正则表达式替换，覆盖更多情况：

replace({
  // 匹配行首/缩进后的#字段声明
  [/^\s*#/gm]: ' private _',
  // 匹配this.#的访问语法
  [/\.#/g]: '._',
  delimiters: ['', ''],
  include: ['./src/**/*.ts', './src/**/*.mts']
})

验证效果 #

修改后，TS编译器会先拿到被替换后的代码：

export class Foo {
  private _foo = 0
  private _bar = 'a'
  get foo() {
    return this._foo
  }
  set foo(value) {
    this._foo = value
  }
  // ... 其余代码
}

再转译为ES5时，就会生成和TSprivate标识符一致的代码（下划线命名的实例属性，而非WeakMap实现）。

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