Typescript + webpack：检查未在Node中定义但在浏览器中定义的变量

Posted 2023-03-05

【中文标题】Typescript + webpack：检查未在Node中定义但在浏览器中定义的变量

【英文标题】：Typescript + webpack: Check for variable that is not defined in Node, but defined in Browser

【发布时间】：2021-11-08 07:25:21

【问题描述】：

我正在尝试编写一个供服务器和客户端使用的软件包，只需根据需要进行少量修改。

一些库是 Node 的一部分但不包含在浏览器中，其他库在浏览器中可用但在 Node 中不可用。

以 https://github.com/lmaccherone/node-localstorage 为例，我想在 Node 上使用 require 库，但在浏览器中，localStorage 已经可用。

我想检查 localStorage 是否可以通过在 https://***.com/a/65755447/2875404 中找到的声明语句获得，所以它看起来像这样：

declare var localStorage: any | undefined;

if (typeof localStorage === "undefined" || localStorage === null) 
    console.log("need to use Node localStorage")
    var LocalStorage = require('node-localstorage').LocalStorage;
    var localStorage = new LocalStorage('./localStorage');
   else 
    console.log("using Browser localStorage")
    

在 webpack 中打包包并在 Chrome sn-p 中运行它进行测试后，"need to use Node localStorage" 消息会在控制台中弹出。如果我手动将 webpack 的代码编辑为 console.log(localStorage) 它实际上会打印 localStorage （所以它必须在那里） - 另外，当我删除整个 if (typeof... 块时，访问 localStorage 的代码似乎运行得很好.

我究竟需要做什么才能使这个“混合决策”功能发挥作用？这是否与 webpack 以某种方式将事物放入无法访问诸如 localStorage 之类的窗口变量的“更深”范围内有关？但是为什么可以打印并与类交互呢？我很困惑。

【问题讨论】：

改为检查window global？

@Dominik 你是最棒的。我现在检查窗口并以 window.localStorage 的形式访问变量。请写为答案，以便我打勾。

【参考方案1】：

正如我在评论中所说，您可以使用全局 window 来检查您是否在浏览器上下文中：

declare var localStorage: any | undefined;

if (typeof window === 'undefined') 
    console.log("need to use Node localStorage")
    var LocalStorage = require('node-localstorage').LocalStorage;
    var localStorage = new LocalStorage('./localStorage');
 else 
    console.log("using Browser localStorage")