时间戳

首页 > 解决方案 > 避免在 ParcelJS 上的 HTML 文件中重命名 JS 变量

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

问题描述

我使用 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>

根据Parcel docs，看起来重命名（修改）是由htmlnano完成的，它在引擎盖下使用Terser进行 JS 缩小。

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

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

我只添加了该removeComments选项以确保.htmlnanorc正在处理文件。HTML 注释被保留，它就是这样。

但是 JS 变量不断被重命名，即使我根据他们的文档尝试了几个 Terser 配置。所以看起来 htmlnano 忽略了minifyJs密钥下的任何配置。

有什么我做错了吗？或者它可能是某种 ParcelJS 或 htmlnano 错误？

标签： javascripthtmlminifyparceljs

解决方案

将变量名称更改为

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

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

资源

推荐阅读