使用@rollup/plugin-node-resolve无法正确选择package.json的browser入口

架构老林

2026-9-23

方案1：调整@rollup/plugin-node-resolve配置优先级

之前的配置未生效大概率是条件匹配顺序的问题，exportConditions默认会包含node、import、default等内置条件，需要显式把browser放在条件序列最前面，同时关闭node内置模块优先匹配：

nodeResolve({
  browser: true,
  preferBuiltins: false, // 关键：禁止优先匹配node原生模块逻辑
  mainFields: ['browser', 'module', 'main'], // 按优先级排列入口字段
  exportConditions: ['browser', 'module', 'import', 'default'], // 把browser放在最优先匹配的位置
})

方案2：通过snowpack别名强制指定入口

如果解析规则调整不生效，直接用alias硬定向到浏览器版本入口，不受模块解析逻辑影响：
在snowpack.config.js中添加如下配置：

module.exports = {
  alias: {
    'broadcast-channel': 'broadcast-channel/dist/esbrowser/index.js'
  },
  // 其余原有配置
}

如果需要区分开发环境和生产环境，也可以按环境判断指向对应导出文件。

方案3：@snowpack/plugin-webpack场景的修复配置

如果使用webpack插件时也出现问题，在webpack配置中添加对应规则即可：
首先在snowpack.config.js中给webpack插件传配置：

module.exports = {
  plugins: [
    ['@snowpack/plugin-webpack', {
      extendConfig: (config) => {
        // 调整webpack的解析条件优先级
        config.resolve.conditionNames = ['browser', 'import', 'module', 'default']
        // 也可以直接加alias强制定向
        config.resolve.alias['broadcast-channel'] = 'broadcast-channel/dist/esbrowser/index.js'
        return config
      }
    }]
  ]
}