Javascript 在使用webpack将代码移植到浏览器时，如何消除服务器依赖性？

我有一个TypeScript代码，它在服务器端（node.js）使用

jsdom

生成DOM结构：

DomCreator.ts

const {JSDOM} = require('jsdom');

externals: {
    jsdom: "jsdom"
  }

    if(typeof window != 'undefined'){
        console.log('browser detected.');
        body = document.getElementsByTagName('body');
    } 
    else {
        console.log('node detected');
        body = (new JSDOM()).dom.window.document.querySelector("body") ;
    }

要在浏览器中运行此代码，我将Webpack配置为将

jsdom

视为外部对象，而不将其包含在捆绑包中：

webpack.config.js

const {JSDOM} = require('jsdom');

externals: {
    jsdom: "jsdom"
  }

    if(typeof window != 'undefined'){
        console.log('browser detected.');
        body = document.getElementsByTagName('body');
    } 
    else {
        console.log('node detected');
        body = (new JSDOM()).dom.window.document.querySelector("body") ;
    }

当代码在浏览器中执行时，存在一个真正的DOM，因此jsdom没有实际用途。然而，由于外部的工作方式，webpack仍然希望

jsdom

在全局空间中单独可用

我的解决方法是在页面顶部创建一个假的

jsdom

对象，这样我就不会在浏览器中遇到

jsdom未定义的错误：

index.html

<script type="text/javascript">
    var  jsdom = {} ;
    jsdom.JSDOM = 0  ;
</script>

这工作正常，但在我看来是零碎的。是否有处理此类情况的最佳实践？特别是，我不想在客户端代码中创建假的
jsdom
对象，而且我也不确定检查
window
是否是分离服务器端和客户端逻辑的最佳方法。
我不知道jsdom，但可能
jsdom=document
？谢谢。我的目标是不要在客户端代码中提到
jsdom
，因为jsdom与客户端无关。如果这是目标，您就必须这样编写代码。编写一个使用jsdom或常规dom API的高级函数。我不知道jsdom，但可能是
jsdom=document
？谢谢。我的目标是不要在客户端代码中提到
jsdom
，因为jsdom与客户端无关。如果这是目标，您就必须这样编写代码。编写使用jsdom或常规dom API的高级函数。