I wont to do
I want to transpile TypeScript code with Private Class Fields to ES5 like when using TypeScript’s private identifier.
(I give up one or the other, it will be resolved soon. But I don’t want to give up.)
I did
I tried to replace code before transpiling TypeScript code using Rollup.
// ./src/index.mts
export class Foo {
#foo = 0
#bar = 'a'
get foo() {
return this.#foo
}
set foo(value) {
this.#foo = value
}
get bar() {
return this.#bar
}
set bar(value) {
this.#bar = value
}
}
// 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({ // Assumption that ' #' and '.#' are not used in strings, regular expressions, etc.
' #': ' private _',
'.#': '._',
delimiters: ['', '']
}),
typescript({compilerOptions: {target: 'es5'}})
]
}
result
JavaScript code using WeakMap
is output. Not appear to be replaced.
Changing from ' private _'
to ' _'
, same result.
How can I solve what I want?
note
In JavaScript file, expected result is output.
So I see nothing wrong with Rollup replace plugin part.
// rollup.config.mjs
import replace from '@rollup/plugin-replace'
export default {
input: './src/index.mjs',
output: {
file: './dist/index.js',
format: 'iife'
},
plugins: [
replace({ // Assumption that ' #' and '.#' are not used in strings, regular expressions, etc.
' #': ' _',
'.#': '._',
delimiters: ['', '']
})
]
}
// ./src/index.mjs (same as ./src/index.mts)
export class Foo {
#foo = 0
#bar = 'a'
get foo() {
return this.#foo
}
set foo(value) {
this.#foo = value
}
get bar() {
return this.#bar
}
set bar(value) {
this.#bar = value
}
}