使用Rollup打包Rails 7项目时，如何让Bootstrap正确导入兼容浏览器的Popper.js版本

我之前也碰到过完全一样的问题！Bootstrap 默认导入的是 Popper.js 的 Node 端 ESM 版本，这个版本依赖 process.env.NODE_ENV 做开发环境校验，但浏览器里根本没有 process 对象，所以才会抛出那个错误。好在 Popper 已经提供了浏览器兼容的 ESM 版本，我们只需要让 Rollup 把 Bootstrap 的 Popper 导入指向正确的路径就行，不用手动改 node_modules。下面是几个可持续的解决方案：

方案一：用 Rollup 别名插件强制替换导入路径 #

这是最直接的方法，通过 @rollup/plugin-alias 把所有指向 @popperjs/core 的导入替换成浏览器兼容版本的路径。

1. 先安装插件：

npm install @rollup/plugin-alias --save-dev

2. 修改你的 Rollup 配置文件（比如 rollup.config.js），添加别名配置：

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

export default {
  // 你的其他 Rollup 配置（比如入口、输出路径等）
  plugins: [
    alias({
      entries: [
        { find: '@popperjs/core', replacement: '@popperjs/core/dist/esm' }
      ]
    }),
    // 其他已有的插件（比如 babel、commonjs 等）
  ]
};

配置完成后，Rollup 会自动把 Bootstrap 里的 import * as Popper from '@popperjs/core' 替换成浏览器兼容的版本，彻底解决 process 未定义的问题。

方案二：通过 Rollup 的 resolve 插件优先选择浏览器版本 #

如果你已经在用 @rollup/plugin-node-resolve，可以调整它的配置，让 Rollup 优先读取模块的浏览器兼容入口。

修改 rollup.config.js 里的 resolve 插件配置：

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

export default {
  // 其他配置
  plugins: [
    resolve({
      // 优先查找 package.json 里的 browser 字段，再找 module、main
      mainFields: ['browser', 'module', 'main']
    }),
    // 其他插件
  ]
};

Popper.js 的 package.json 里已经预先定义了 browser 字段对应的浏览器兼容版本路径，所以这个配置会让 Rollup 自动选择正确的版本，不用额外写别名。

验证效果 #

不管用哪个方案，配置完成后重新运行 Rollup 打包命令，再启动 Rails 项目，之前的 Uncaught ReferenceError: process is not defined 错误应该就消失了，Bootstrap 依赖 Popper 的组件（比如下拉菜单、弹出框）也能正常工作。

备注：内容来源于stack exchange，提问作者fre