避免在 ParcelJS 上的 HTML 文件中重命名 JS 变量

Question

我正在使用 ParcelJS 作为模块打包器，出于某些原因，我在 HTML 中使用了 JS 变量，稍后将由 JS 代码读取。

在我的 HTML:

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

在我的 JS 中：

console.log(window.myVar.key1);

当我使用 parcel build 构建静态站点时，HTML 中的 JS 变量被重命名，因此我无法再从 JS 文件中读取它：

<script>var a = { key1: 'value1', key2: 'value2' };</script>

根据 the Parcel docs, it looks like the renaming (mangling) is done by htmlnano, which uses Terser JS 缩小的底层。

我尝试使用具有以下内容的 .htmlnanorc 文件：

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

我只添加了 removeComments 选项以确保正在处理 .htmlnanorc 文件。 HTML评论保留，原来如此。

但是 JS 变量一直在重命名，即使我已经根据他们的文档尝试了几种 Terser 配置。所以看起来 htmlnano 忽略了 minifyJs 键下的任何配置。

我做错了什么吗？还是某种 ParcelJS 或 htmlnano 错误？

Answer 1

将您的变量名称更改为

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

无法使用 parcel.js 更改此行为，因此您必须采取解决方法。

Avoid JS variable renaming in HTML files on ParcelJS