Grid.js中Preact是否需列为生产依赖？配置疑问咨询

核心结论 #

如果你的包需要维护Preact上下文一致性，并且导出useEffect、useCallback等Preact hooks，必须将Preact列为生产依赖（dependencies），绝对不能仅放在开发依赖（devDependencies）中。

关键原因 #

1. 上下文与运行时一致性要求
   Preact的上下文系统、hooks状态都是绑定在同一个Preact实例上的。如果你的包将Preact打包进自身产物，而用户项目中也存在Preact，会出现两个独立的Preact运行时实例——这会直接导致上下文断裂，hooks无法共享状态，上下文提供者完全失效，引发不可预测的渲染错误和状态异常。

2. Hooks的绑定特性
   Preact的hooks并非通用工具函数，它们的内部逻辑紧密依赖Preact的运行时环境。只有当hooks和用户项目中的Preact来自同一个实例时，才能正常触发组件更新、状态管理等核心逻辑。打包私有Preact实例会导致hooks脱离用户的Preact运行时，完全无法正常工作。

3. 包依赖的语义规范
   devDependencies仅用于开发阶段的构建、测试、lint等工具类依赖，而你的包的核心功能完全依赖Preact的运行时支持，因此它属于运行时必需依赖，必须放在dependencies中，这也符合npm/yarn等包管理器的依赖语义规范。

Rollup配置建议 #

为了避免打包重复的Preact实例，同时保证依赖一致性，需要在Rollup配置中将Preact设为外部依赖：

// rollup.config.js
export default {
  input: 'src/index.ts',
  external: ['preact'], // 将preact标记为外部依赖
  output: [
    {
      format: 'esm',
      file: 'dist/index.esm.js'
    },
    {
      format: 'umd',
      file: 'dist/index.umd.js',
      name: 'YourPackageName',
      globals: {
        preact: 'preact' // UMD格式下指定全局变量名
      }
    }
  ]
};

这样配置后，Rollup会跳过Preact的打包，转而在产物中通过导入语句（ESM）或全局变量（UMD）引用用户环境中的Preact实例，从根本上保证上下文和hooks的一致性。

额外注意事项 #

• 可以在package.json中指定Preact的版本范围（比如"preact": "^10.0.0"），避免版本不兼容导致的问题。
• 如果你的包需要同时支持React和Preact，可以考虑使用preact/compat，但依然要保持Preact作为生产依赖的配置。

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