如何配置Rollup.js正确打包CommonJS模块并注入HTML？

问题分析 #

Uncaught ReferenceError: exports is not defined 错误源于diffusion包是CommonJS格式，而Rollup默认仅处理ES模块；同时手动引入打包文件才能运行，说明自动注入HTML的配置存在问题。以下是针对性的配置调整方案：

1. 修正Rollup配置文件（rollup.config.mjs） #

@open-wc/building-rollup的createSpaConfig已经内置了nodeResolve插件，重复添加会导致冲突；同时需要明确配置commonjs插件识别diffusion的导出项，确保自动注入打包文件到HTML：

import { createSpaConfig } from '@open-wc/building-rollup';
import typescript from '@rollup/plugin-typescript';
import merge from 'deepmerge';
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,
    inject: true, // 强制开启打包文件自动注入HTML
  },
  injectServiceWorker: false,
  legacyBuild: false,
  workbox: false,
});

export default merge(baseConfig, {
  input: 'index.html',
  plugins: [
    typescript({
      declaration: false,
      sourceMap: false,
      inlineSources: false,
      compilerOptions: {
        target: 'esnext',
      },
    }),
    commonjs({
      include: /node_modules/,
      sourceMap: false,
      // 手动指定diffusion的导出项（替换为实际导出的变量名）
      namedExports: {
        'diffusion': ['DiffusionClient', 'Session'] // 示例：根据diffusion实际导出调整
      }
    })
  ]
});

2. 确认index.html的入口脚本格式 #

确保HTML中的入口脚本使用type="module"，让Rollup正确识别并打包：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TypeScript App</title>
</head>
<body>
  <!-- 入口脚本必须为type="module" -->
  <script type="module" src="./src/app.ts"></script>
</body>
</html>

关键调整说明 #

• 移除重复的nodeResolve：createSpaConfig已集成该插件，重复添加会导致模块解析逻辑冲突。
• commonjs插件的namedExports：部分CommonJS模块的导出无法被Rollup自动识别，手动指定后可避免exports未定义的错误。
• 开启html.inject：确保打包生成的main.js自动注入到输出的index.html中，无需手动添加。

内容的提问来源于stack exchange，提问作者Amani Ben Azzouz