使用Rollup打包Langium库出现运行时错误求助

使用Rollup打包Langium库时，打包过程正常，但生成的Bundle文件运行时抛出如下错误：

Uncaught TypeError: Object.defineProperty called on non-object
    at Function.defineProperty (<anonymous>)
    at requireCompletionParserBuilder (user-of-langium.js:47901:11)
    at requireDefaultModule (user-of-langium.js:50827:38)
    at requireGrammarUtil (user-of-langium.js:29791:27)
    at requireGeneratorTracing (user-of-langium.js:15009:25)
    at requireNodeProcessor (user-of-langium.js:15155:30)
    at user-of-langium.js:15880:29
    at requireGeneratorNode (user-of-langium.js:16299:6)
    at requireTypes (user-of-langium.js:16321:27)
    at user-of-langium.js:18420:18

当前使用的Rollup配置：

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/user-of-langium.js',
  output: {
    dir: '.dist',
    format: 'iife'
  },
  plugins: [
    nodeResolve({ browser: true }),
    commonjs(),
  ]
};

解决方案 #

这个错误源于CommonJS模块转译时的导出处理不当，加上Langium依赖部分Node.js内置模块，浏览器环境下缺失这些模块导致异常。可以通过以下调整修复：

1. 修改Rollup配置，添加必要插件与参数 #

先安装所需插件：

npm install @rollup/plugin-inject @rollup/plugin-node-polyfills --save-dev

替换为以下配置：

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import inject from '@rollup/plugin-inject';
import nodePolyfills from '@rollup/plugin-node-polyfills';

export default {
  input: 'src/user-of-langium.js',
  output: {
    dir: '.dist',
    format: 'umd', // 替换iife为umd，提升兼容性
    name: 'UserOfLangium' // UMD格式需要指定全局变量名
  },
  plugins: [
    nodeResolve({ browser: true, preferBuiltins: false }),
    nodePolyfills(), // 为浏览器提供Node.js核心模块polyfill
    inject({
      process: ['process/browser'] // 注入process对象
    }),
    commonjs({
      ignoreGlobal: true,
      transformMixedEsModules: true // 处理混合ES模块与CommonJS的情况
    }),
  ]
};

2. 关键调整说明 #

• 切换输出格式为UMD：相比IIFE，UMD格式更适配浏览器与其他环境，避免IIFE在模块依赖处理上的局限性。
• CommonJS插件参数：transformMixedEsModules确保正确转译混合模块，ignoreGlobal避免全局变量冲突导致的非对象值问题。
• 补充Polyfill：Langium依赖Node.js的process等内置模块，通过nodePolyfills和inject插件为浏览器环境补充这些缺失的模块。

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