TypeScript+Phaser项目中rollup搭配node-resolve插件无输出问题

核心原因 #

• 未配套安装@rollup/plugin-commonjs：@rollup/plugin-node-resolve仅负责解析node_modules中的依赖路径，Phaser本身是CommonJS格式模块，缺少CJS转ES模块的处理插件时，rollup会静默终止打包流程，无报错也无产物输出。
• 禁用node-resolve后打包的产物缺失依赖：注释node-resolve插件后，rollup不会处理第三方依赖导入逻辑，生成的js文件会保留import 'phaser'这类节点导入语句，浏览器运行时无法识别对应路径，导致运行异常。

修复步骤 #

1. 安装缺失的依赖插件，执行命令：
   npm install @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev

2. 修改rollup配置文件，按正确顺序配置插件，参考完整配置如下：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/main.ts',
  output: {
    file: './dist/game.js',
    name: 'MyGame',
    format: 'iife',
    sourcemap: false
  },
  plugins: [
    // 优先配置node-resolve，开启browser适配前端打包
    resolve({
      browser: true
    }),
    // 紧随其后配置commonjs转换CJS模块
    commonjs(),
    // 最后配置typescript编译
    typescript()
  ]
};

3. 检查tsconfig.json配置，确保compilerOptions.module字段设为ESNext或ES6，不要设置为CommonJS格式，避免模块解析冲突。

4. 重新执行打包命令：
   npm run build
   即可正常生成可用的./dist/game.js产物。

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