typescript - 如何配置 rollup js 打包 Node 模块的 CommonJS

我有一个简单的 TypeScript 应用程序，我在浏览器中运行它。为了打包 TypeScript 文件，我使用了 Rollup JS。

我安装了扩散软件包

npm install diffusion

并将模块导入到我的 ts 文件 app.ts 中：

import * as diffusion from 'diffusion';

diffusion.connect({/* options */});

现在，当我在浏览器中启动应用程序时，会出现以下情况：

diffusion.js:5 Uncaught ReferenceError: exports is not defined
    at diffusion.js:5:23

这是导致错误的那行代码：

Object.defineProperty(exports, "__esModule", { value: true });

问题是如何使用 Rollup 正确打包一个使用 CommonJS 的节点模块。

这是我当前的 rollup.config.mjs 文件：

import { createSpaConfig } from '@open-wc/building-rollup';
import typescript from '@rollup/plugin-typescript';
import merge from 'deepmerge';
import nodeResolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

const baseConfig = createSpaConfig({
  outputDir: 'dist',
  nodeResolve: { browser: true, dedupe: ['lit-html'] },
  developmentMode: process.env.ROLLUP_WATCH === 'true',
  html: {
    extractAssets: false,
    minify: false,
  },
  injectServiceWorker: false,
  legacyBuild: false,
  workbox: false,
});


export default merge(baseConfig, {
  input: 'index.html',
  plugins: [
    typescript({
      declaration: false,
      sourceMap: false,
      inlineSources: false,
      compilerOptions: {
        target: 'esnext',
      },
    }),
    nodeResolve(),
    commonjs({
      include: /node_modules/,
      sourceMap: false,
    })
  ]
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2021",
    "module": "ESNext",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "declaration": true,
    "sourceMap": true,
    "importHelpers": true,
    "inlineSources": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
    "allowJs": true,
    "maxNodeModuleJsDepth": 2,
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["node_modules/@types"]
  },
  "include": ["src/**/*"]
}

编辑

我尝试在这里重现该应用，使用 parcel（不幸的是，我无法在 codesandbox.io 内使用 web-dev-server 和 rollup 启动该应用，但我在那里提供了与我本地使用的相同的应用结构）。

这个应用在 Parcel 上运行良好，但当我用 Rollup 构建它时：

npm run build

并使用 web-dev-server 启动它

npm start

使用以下构建和启动脚本：

{ ...
  "build": "rimraf dist/ && rollup --config"
  "start": "web-dev-server --watch"   
... }

我在本地遇到这个错误：diffusion.js:5 Uncaught ReferenceError: exports is not defined 如何使用 rollup js 修复它？

编辑 2

我刚注意到，在构建应用程序之后，如果我将打包后的 main.js 文件添加到我的 index.html 条目中，它就可以正常工作，所以基本上我缺少的是配置 rollup 将打包文件注入到我的 index.html 文件中，但不知道该如何添加？