Search code examples
javascripttypescriptunicodeesbuildvariable-names

How to preserve Unicode characters in name when bundling with esbuild?

In test.ts I have:

const π: number = 3.14

Running esbuild .\test.ts I get:

const \u03C0 = 3.14;

Is there a way to keep the variable name as π? Likewise for function names, class names, types, interfaces, etc. So far I only see comments are preserved.

Solution

  • Use esbuild --charset=utf8 .\test.ts

    The text below is copied from the documentation:

    By default esbuild's output is ASCII-only. Any non-ASCII characters are escaped using backslash escape sequences. One reason is because non-ASCII characters are misinterpreted by the browser by default, which causes confusion. You have to explicitly add <meta charset="utf-8"> to your HTML or serve it with the correct Content-Type header for the browser to not mangle your code. Another reason is that non-ASCII characters can significantly slow down the browser's parser. However, using escape sequences makes the generated output slightly bigger, and also makes it harder to read.

    If you would like for esbuild to print the original characters without using escape sequences and you have ensured that the browser will interpret your code as UTF-8, you can disable character escaping by setting the charset:

    echo 'let π = Math.PI' | esbuild
let \u03C0 = Math.PI;
echo 'let π = Math.PI' | esbuild --charset=utf8
let π = Math.PI;

    Some caveats:

    • This does not yet escape non-ASCII characters embedded in regular expressions. This is because esbuild does not currently parse the contents of regular expressions at all. The flag was added despite this limitation because it's still useful for code that doesn't contain cases like this.

    • This flag does not apply to comments. I believe preserving non-ASCII data in comments should be fine because even if the encoding is wrong, the run time environment should completely ignore the contents of all comments. For example, the V8 blog post mentions an optimization that avoids decoding comment contents completely. And all comments other than license-related comments are stripped out by esbuild anyway.

    • This option simultaneously applies to all output file types (JavaScript, CSS, and JSON). So if you configure your web server to send the correct Content-Type header and want to use the UTF-8 charset, make sure your web server is configured to treat both .js and .css files as UTF-8.