Grunt uglify 将字符串 "undefined" 视为关键字 undefined

Question

我正在对现有的 Angular SPA 进行更改，该 SPA 有时会在应用程序的产品内浏览器中查看。该应用程序在 window.external.Handle 上公开了多个功能，以允许页面与应用程序中的某些功能进行交互或从应用程序中提取详细信息（考虑应用程序版本、许可证详细信息等）。

我有以下代码（可以在另一个不使用 grunt-contrib-uglify 的网站上运行）：

function isInProduct() {

    if (typeof window.external !== undefined && typeof window.external !== "undefined") {
        if (typeof window.external.Handle !== undefined && typeof window.external.Handle !== "undefined") {
            alert('in-product')
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }
}

如果我 grunt serve 本地文件，页面会按预期工作。当我提供 dist 或 UAT 构建（两者都包含 uglify 任务）时，调用上述函数的站点区域无法正确呈现。

我已经追踪到下面的丑化版本：

function e(e,t){return{isInProduct:function(){return void 0!==window.external&&void 0!==typeof window.external&&void 0!==window.external.Handle&&void 0!==typeof window.external.Handle}

将 'void 0!==window.external' 和 'void 0!==window.external.Handle' 分别更改为 '"undefined"!==typeof window.external' 和 '"undefined"!==typeof window.external.Handle' 可以解决问题，页面在所有情况下都能正确呈现。

我明白为什么 uglify 试图以这种方式简化代码，但我认为这样做是不正确的——它没有将字符串 "undefined" 视为字符串（应用程序有一些怪癖，将 return 字符串而不是 keywords/booleans），从而破坏了代码。我如何防止它这样做？

Answer 1

经过更多研究后，我遇到了，它提供了一种更简洁的方法来检查产品内函数是否存在。

使用建议的检查不仅可以生成更清晰的代码，而且可以毫无问题地进行丑化。适配我的问题，代码如下：

function isIsProduct() {
    return ('Handle' in window.external);
}

Grunt uglify 将字符串 "undefined" 视为关键字 undefined

Grunt uglify treating string "undefined" as the keyword undefined

javascript

gruntjs

grunt-contrib-uglify