转译后的 JS 中未正确呈现 Unicode 字符

Question

我有一个简单的音译应用程序，它在简单的 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 会出现乱码。我调查了所有我可能接触到的地方，但我很难弄清楚到底发生了什么。有人可以指出我在这里做错了什么吗？（我故意避免了配置文件的内容以保持简短。如果您需要查看这些内容，请发表评论。我也很乐意 post 那些内容。）

Answer 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 字符。这解决了我的问题。

转译后的 JS 中未正确呈现 Unicode 字符

Unicode characters are not properly rendered in transpiled JS

html

javascript

unicode