Node+TypeScript+Webpack环境下ESM模块浏览器互操作性问题

我目前在浏览器环境下实现两个ESM模块协同工作时遇到了问题，具体情况如下：

• esm1模块状态：

  • 使用TypeScript开发，通过tsc编译生成ES6模块，再用Webpack打包为浏览器可用的bundle。
  • 执行esm1$ npm run webtest（网页测试）和esm1$ npm run test:esm（ES模块测试）均能正常运行。

• esm2模块配置与代码：

  • 模块结构与esm1完全一致，已在package.json中声明esm1为依赖。
  • 在esm2的TypeScript文件中引入esm1的类，代码如下：

    // esm2/src/index.ts
    import {Hammer} from 'esm1/lib-esm/Hammer.js';
    import { BoxObject } from 'esm1/lib-esm/BoxObject.js';
    import {Box} from 'esm1/lib-esm/Box-node.js';
    
    export class Interop {
        constructor() {}
        doSomethingWithEsm1() {
            console.log("Into doSomethingWithEsm5");
            const p = new Hammer("blue");
            console.log(p);
            const box = new Box("studio");
            box.addObject(p);
            console.log(box);
            box.getFile("http://skies.esac.esa.int/Herschel/PACS-color/properties").then( (data) => console.log(data));
        }
    }
    const ip = new Interop();
    ip.doSomethingWithEsm1();
    

• 测试异常情况：

  • 执行esm2$ npm run test:esm时一切正常，但将esm2的bundle引入网页后出现错误。网页代码如下：

    <!-- esm2/webtest/index.html -->
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>ESM 6 module</title>
        <base href="."/>
        <script src="./my-lib.js"></script>
    </head>
    <body>
        <h1>Hello world from ESM6!</h1>
        <h2>Tip: Check your console</h2>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                console.log("Hello World from ESM6!");
                const ip = new MyEsm2.Interop();
                const h  = new MyEsm1.Hammer("green");
                ip.doSomethingWithEsm1(h);
            });
        </script>
    </body>
    </html>
    

• 浏览器控制台报错：

  Uncaught TypeError: esm1_lib_esm_Hammer_js__WEBPACK_IMPORTED_MODULE_0__ is undefined
      doSomethingWithEsm1 index.ts:14
      <anonymous> index.ts:27
      <anonymous> my-lib.js:135
      <anonymous> my-lib.js:138
      webpackUniversalModuleDefinition universalModuleDefinition:9
      <anonymous> universalModuleDefinition:10
  index.ts:14:18
  Hello World from ESM6! localhost:5001:21:17
  Uncaught ReferenceError: MyEsm2 is not defined
      <anonymous> http://localhost:5001/:22
      EventListener.handleEvent* http://localhost:5001/:18
  

代码托管在GitHub，仓库名分别为esm1和esm2，求帮忙排查问题。

内容的提问来源于stack exchange，提问作者user4358919