babel 編譯后導致_typeof無限遞歸調用 Maximum call stack size exceeded

問題：

項目使用的babel (版本 @babel/core 7.13.8），在我引用一個第三方JS庫時，程序執行時會報Maximum call stack size exceeded錯誤。斷點調試發現babel會將typeof 編譯為_typeof（一個babel實現的輔助函數），而這個_typeof函數的代碼有問題，導致無限遞歸調用自身。

之后在 node_modules/@babel/helpers/lib/helpers.js中找到了相關的源碼，發現babel的代碼並沒有錯，如下：

helpers.typeof = helper("7.0.0-beta.0")`
  export default function _typeof(obj) {
    "@babel/helpers - typeof";

    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
      _typeof = function (obj) { return typeof obj; };
    } else {
      _typeof = function (obj) {
        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype
          ? "symbol"
          : typeof obj;
      };
    }

    return _typeof(obj);
  }
`;

如果代碼中有typeof的話，這段代碼會被加到編譯后的代碼中。

注意上面代碼中的紅字，我用到的js庫在編譯后這個typeof會變成 “_typeof”（或_typeof2, _typeof3之類的），也就是如下：

function _typeof(obj) {
    "@babel/helpers - typeof";
    if (typeof Symbol === "function" && _typeof(Symbol.iterator) === "symbol") {
　　　　...
    } else {
　　　　...
    }
    return _typeof(obj);
}

所以，代碼只要執行到這里就會導致無限遞歸了。

解決方法：

最后發現是 .babelrc的配置有問題，改成下面就好了：

{
  "presets": [
      [
          "@babel/preset-env",
          {
              "targets": "> 0.5%, not dead"
          }
      ]
  ],
  "comments": false,
  "ignore": []
}

 

BABEL官方相關問題的貼子

https://github.com/babel/babel/issues/3836，

https://github.com/babel/babel/issues/9127