ParcelJS构建时如何避免HTML中的JS变量被重命名？

听起来你遇到的问题是Parcel使用htmlnano压缩HTML内的script时，全局变量被意外重命名，即使配置了minifyJs.mangle: false也没生效。我来帮你分析可能的原因和解决方案：

可能的原因 #

1. htmlnano配置结构或优先级问题：Parcel可能有默认的htmlnano配置覆盖了你的自定义设置，或者你的Terser配置项不够具体，没有完全禁用变量混淆。
2. Terser的全局变量识别逻辑：当HTML内的script标签独立存在时，Terser可能无法感知到这个变量会被外部JS文件引用，即使关闭mangle，某些默认行为仍可能触发重命名。
3. Parcel与htmlnano的集成bug：部分Parcel版本可能存在配置传递的问题，导致你的.htmlnanorc没有被正确读取。

解决方案 #

1. 修正.htmlnanorc的Terser配置 #

尝试更明确地禁用混淆和压缩，确保配置覆盖Parcel的默认设置：

{
  "minifyJs": {
    "mangle": false,
    "compress": false,
    "keep_fnames": true,
    "keep_classnames": true
  },
  "removeComments": false
}

如果还是无效，先尝试完全关闭HTML内的JS压缩，验证配置是否被读取：

{
  "minifyJs": false,
  "removeComments": false
}

如果关闭后变量不再被重命名，说明之前的mangle配置需要更精准的Terser参数；如果依旧被重命名，那大概率是Parcel没有加载你的配置文件，检查文件是否在项目根目录，且JSON语法无误。

2. 改用JS模块定义全局变量 #

绕过HTML内script被压缩的问题，在JS模块中定义变量并挂载到window：

• 创建src/myVar.js：

export default { key1: 'value1', key2: 'value2' };

• 在入口JS文件中引入并挂载：

import myVar from './myVar.js';
window.myVar = myVar;

这种方式下，Parcel会正确识别变量的全局用途，不会进行重命名。

3. 直接在HTML中使用window挂载变量 #

修改HTML内的script，直接通过window定义变量，避免Terser混淆全局变量名：

<script>
window.myVar = { key1: 'value1', key2: 'value2' };
</script>

Terser默认不会混淆window的属性，除非你主动开启了mangle.properties选项，这样变量名myVar会被保留。

4. 升级/降级Parcel版本 #

如果上述方法都无效，可能是Parcel与htmlnano的集成存在版本兼容问题。尝试升级Parcel到最新稳定版，或者降级到已知无此问题的版本（比如Parcel 2.8.x系列）。

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