如何配置rollup js来捆绑节点模块commonJs

Question

我有一个在浏览器中运行的简单 ts 应用程序。 为了捆绑 ts 文件，我使用 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 });

问题是如何将正确使用commenJs的节点模块与rollup捆绑在一起。

这是我当前的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在here重现该应用程序（不幸的是，我无法在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 条目中，它就可以工作，所以基本上我缺少的是配置汇总以将捆绑文件注入到我的 index.html 文件中，但不知道如何添加它？

Answer 1

您应该配置 Rollup 以正确地将 CommonJS 模块转换为 ES 模块。

试试这个：

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";
import inject from '@rollup/plugin-inject';

const baseConfig = createSpaConfig({
  // ... 
});

export default merge(baseConfig, {
  // ... 
  plugins: [
    // ...
    commonjs({
      include: /node_modules/,
      sourceMap: false,
      transformMixedEsModules: true,
    }),
    inject({
      include: '**/*.js',
      exclude: 'node_modules/**',
      modules: {
        exports: 'exports',
      },
    }),
  ]
});

这包括@rollup/plugin-commonjs插件，添加了transformMixedEsModules选项，以更好地处理混合ES和CommonJS模块，以及@rollup/plugin-inject，为导出对象提供后备。

希望这有帮助！