Unicode 字符未在转译的 JS 中正确呈现答案

【问题标题】：Unicode characters are not properly rendered in transpiled JSUnicode 字符未在转译的 JS 中正确呈现
【发布时间】：2020-12-30 12:55:14
【问题描述】：

我有一个简单的音译应用程序，它在简单的 JavaScript 中运行良好（在一个名为 cctest.js 的文件中）。

function parse() {
    return '\u0d85';
}

我使用的测试HTML如下。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="cctest.js"></script>
    <script type="text/javascript" src="dist/cctest.js"></script>
</head>
<body>
    <script type="text/javascript">
        console.log(parse());
        console.log(CCTest.parse());
    </script>
</body>
</html>

我决定将其重构为以下内容，以便更好地利用面向对象方面 (src/cctest.js)。

export default class CCTest {
    parse() {
        return '\u0d85';
    }
}

src/index.js

import CCTest from "./ccctest";

(function(window){
    window.CCTest = new CCTest();
})(window)

我已将其配置为使用 webpack 和 babel 进行转译，这很有效。但是当我打开测试页面时，我在控制台中有以下结果。

如您所见，纯 JS 渲染 Unicode 没有任何问题，而使用 Webpack 和 Babel 转译的 JS 则出现乱码。我查看了我可能会把手放在的所有地方，但我很难弄清楚发生了什么。有人可以指出我在这里做错了什么吗？（我故意避免配置文件的内容以保持简短。如果您需要查看这些内容，请发表评论。我也很乐意发布这些内容。）

【问题讨论】：

这是mojibake case.අ in UTF-8 is byte sequence 0xE0,0xB6,0x85 如果解释为 latin1à¶� /i> 个字符。

标签： javascript html unicode

【解决方案1】：

当我深入挖掘时，我认为这是文件缩小的问题。在缩小过程中，unicode 文字 '\u0d85' 被替换为其实际的 unicode 表示，导致缩小版本具有 ...return 'අ'...，从而导致 Mojibake 0xE0、0xB6 和 0x85（感谢 JosefZ感谢他对 Mojibake 的暗示。）

设法通过使用第 3 方压缩器 uglifyjs-webpack-plugin 解决了这个问题。 webpack.config.js 中的配置类似于

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = (env = {
  minify: false
}) => {
  return {
    ...,
    optimization: {
      minimize: env.minify && env.minify === 'true',
      minimizer: [new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            // true for `ascii_only`
            ascii_only: true
          },
        },
      })],
    },
    ...
  }
};

这里的关键是通过使用配置选项 ascii_only: true 将压缩器配置为仅使用 ASCII 字符。这为我解决了问题。

【讨论】：