javascript - איך אני יכול לבטל תלות שמיועדת לשרת בלבד כשמעביר קוד לדפדפן באמצעות webpack?

יש לי קוד TypeScript שמשתמש ב-jsdom בצד השרת (node.js) כדי ליצור מבנה DOM:

DomCreator.ts

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

כדי להריץ את הקוד הזה בדפדפן, קונפגתי את Webpack כך שיטפל ב-jsdom כחיצוני ולא יכלול אותו בחבילה:

webpack.config.js

externals: {
    jsdom: "jsdom"
  }

כאשר הקוד מורץ בדפדפן, קיים DOM אמיתי כך ש-jsdom אינו שימושי באמת. עם זאת, webpack עדיין מצפה ל-jsdom להיות זמין בנפרד במרחב הגלובלי, בגלל האופן שבו externals פועלים.

הפתרון שלי היה ליצור אובייקט jsdom מזויף מעל הדף, כך שאני לא נתקע בשגיאה jsdom is not defined בדפדפן:

index.html

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

שמתי תנאי בקוד TypeScript כדי לבדוק את נוכחות האובייקט window (כפרוקסי לכך שאנחנו בסביבת דפדפן) וליצור את אובייקט ה-DOM או דרך jsdom או להשתמש ב-document של הדפדפן בהתאם לתנאי הזה:

DomCreator.ts

    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") ;
    }

זה עובד בסדר אבל נראה לי מפוזר. האם יש שיטות עבודה מומלצות לטיפול במצבים כאלה? במיוחד, אני לא רוצה ליצור את האובייקט המזויף jsdom בקוד בצד הלקוח, וגם אני לא בטוח אם בדיקת window היא הדרך הטובה ביותר להפריד בין הלוגיקה בצד השרת והלקוח.