如何阻止Babel.js将字符串转义为Unicode编码

你遇到的是Babel默认开启非ASCII字符转义导致的问题，可通过以下方法配置修复：

方法1：配置Babel生成器选项（推荐） #

直接修改Babel配置文件（.babelrc、babel.config.json均可），添加generatorOpts配置关闭Unicode转义：

{
  "generatorOpts": {
    "jsonCompatibleStrings": false
  }
}

该方法不会影响其他Babel转译功能，仅关闭字符串的Unicode强制转义。

方法2：禁用字符串字面量转译插件 #

如果你使用了@babel/preset-env，可以排除转义字符串的插件：

{
  "presets": [
    ["@babel/preset-env", {
      "exclude": ["@babel/plugin-transform-literals"]
    }]
  ]
}

注意该方法会同时关闭模板字符串转普通字符串、数字字面量优化等其他字面量相关转译功能，仅建议你不需要这类转译时使用。

方法3：webpack+babel-loader场景配置 #

如果是在webpack构建场景中，直接在babel-loader的配置项中添加对应参数即可：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            generatorOpts: {
              "jsonCompatibleStrings": false
            }
          }
        }
      }
    ]
  }
}

额外排查项 #

如果配置后仍出现\uFFFD乱码转义，先确认你的源js文件是以UTF-8无BOM格式保存的，编码错误会导致Babel读取字符识别异常。

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