在 Angular 执行 JavaScript 缩小后，如何保留特定的变量名称？

Question

我希望在代码缩小后保留一个变量名。不确定这是否重要，但它也必须能够在 TypeScript 被编译为缩小版 JavaScript 的过程中幸存下来。

细节：

• 我正在使用 Angular CLI，当我使用控制台命令时，ng build --prod我的所有 TypeScript 都会转换为单个缩小的 JavaScript 文件。
• 我正在使用Mouseflow，并且想要实现“在一个热图中组合多个页面”，如 Mouseflow 知识库页面上所述。
• 当我按照描述添加变量并进行生产构建时，我的变量会获得一个新名称，因此 Mouseflow 无法按名称引用父作用域中的变量。

以下是 mouseflow 知识库中的相关信息：

如果您在这些页面上添加该mouseflowPath变量并将其设置为var mouseflowPath = '/shop/products/productdetail;'，Mouseflow 会将所有这些页面视为一个唯一页面，并且仅在 URL 下生成一个热图'/shop/products/productdetail'。

<script type="text/javascript">
    window._mfq = window._mfq || [];

    // *** THIS NEEDS TO STAY ***
    var mouseflowPath = '/shop/products/productdetail';

    (function() {
        var mf = document.createElement("script"); mf.type = "text/javascript"; mf.async = true;
        mf.src = "//cdn.mouseflow.com/projects/your-website-id.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
</script>

我想到的唯一明确的解决方案是mouseflowPath通过缩小强制变量保留其原始名称。

Answer 1

而不是这个：

var mouseflowPath = '/your/new/path';

用这个：

window['mouseflowPath'] = '/your/new/path';

两个结果完全相同。使用上面的属性访问器语法将允许保留字符串和全局引用。