Rollup.js+React开发环境热重载不生效问题求助

1. @rollup/plugin-typescript 缓存问题 #

该插件默认开启类型检查缓存，可能导致修改后的TS代码未重新编译。可通过以下配置禁用缓存：

import typescript from '@rollup/plugin-typescript';

export default {
  plugins: [
    typescript({
      cacheDir: undefined, // 直接禁用缓存
      transpileOnly: true, // 若无需实时类型检查，开启此选项可规避缓存问题同时提升编译速度
    })
  ]
};

也可手动指定缓存目录为容器内临时目录，避免挂载卷干扰缓存有效性。

2. Docker 挂载卷的文件同步延迟 #

尽管图片资源更新正常，但TS文件可能因Docker挂载机制（如volume的copy-on-write特性），导致容器内Rollup仅感知到文件元数据变化（触发重建），但读取的仍是旧文件内容。

• 若使用Docker Desktop，挂载时添加delegated模式提升同步效率：

  # docker-compose.yml 示例
  volumes:
    - ./src:/app/src:delegated
  

• Linux主机环境下，避免使用NFS等延迟较高的挂载方式，确保主机与容器的文件系统事件能正常传递。

3. Rollup Watch 监听范围配置遗漏 #

确认Rollup的watch配置覆盖所有TS相关依赖文件（如.d.ts、tsconfig.json），遗漏这些文件可能导致编译不更新：

export default {
  watch: {
    include: 'src/**/*.{ts,tsx,d.ts}',
    exclude: 'node_modules/**',
    chokidar: {
      usePolling: true,
      interval: 100, // 缩短轮询间隔，加快变更感知速度
      binaryInterval: 200
    }
  }
};

4. 编译输出目录未清理 #

若未清理旧编译输出，Rollup打包时可能混入旧文件。可通过两种方式解决：

• 在构建脚本中添加清理步骤：

  // package.json
  "scripts": {
    "dev": "rimraf dist && rollup -cw"
  }
  

• 使用@rollup/plugin-cleanup插件自动清理：

  import cleanup from '@rollup/plugin-cleanup';
  
  export default {
    plugins: [
      cleanup({ targets: ['dist/*.js'] }),
      // 其他插件配置
    ]
  };
  

5. 容器内文件权限问题 #

确保容器内Node进程有权限读取修改后的TS文件，挂载后的文件权限异常（如只读、用户组不匹配）会导致Rollup无法读取新内容：

# Dockerfile 示例
RUN chown -R node:node /app
USER node

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