Rollup 报错 process is not defined 的解决方法

打包能过、一到浏览器里运行就报 process is not defined，原因是产物里残留了 process.env.NODE_ENV 这类只有 Node 环境才有的全局变量。process 是 Node 提供的对象，浏览器里根本不存在。

这些代码通常不是自己写的，而是来自依赖包——很多库会用 process.env.NODE_ENV === 'production' 来切换开发警告和生产逻辑。webpack 默认帮你处理了这层（内置 DefinePlugin 并预设了 NODE_ENV），rollup 保持了「什么都不多做」的风格，需要自己显式配置。

正确的解法不是去 mock 一个 process 对象，而是在打包阶段做静态替换：把源码里的 process.env.NODE_ENV 直接换成字符串字面量 "production"。这样产物里不再有 process 的引用，同时那些 if (process.env.NODE_ENV !== 'production') 的分支会变成恒假条件，可以被 tree-shaking 整段删掉，体积也更小。

解决方法

• 安装 rollup-plugin-replace 包
• 在 rollup 的配置文件的 plugins 中加入如下代码

replace 插件在打包时做源码级的文本替换。JSON.stringify('development') 是必须的——替换值要求是一段合法的 JS 代码字符串，直接写 'development' 会被当成变量名替进去，产物里出现 process.env.NODE_ENV 变成 development 这个未定义的标识符，报错从 process is not defined 变成 development is not defined。JSON.stringify 帮你把引号加上，替进去的是 "development" 这个字面量。

VUE_ENV 是 Vue 2 的服务端渲染判断用的，打浏览器产物时设成 'browser'。

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

export default {
  plugins: [
    replace({
      'process . env.NODE_ENV': JSON.stringify('development'),
      'process . env.VUE_ENV': JSON.stringify('browser'),
    }),
  ],
};

注意事项

• 包名有两个：老的 rollup-plugin-replace 已废弃，官方维护的是 @rollup/plugin-replace。安装时装官方那个，import 路径也要对应写成 @rollup/plugin-replace。
• 新版本插件要求显式传 preventAssignment: true，否则会打印警告。这个选项的作用是避免把 process.env.X = 'y' 这种赋值语句的左侧也替换掉（替换后会变成给字面量赋值的非法代码）。
• replace 要放在 plugins 数组靠前的位置，尤其要在 commonjs 插件之前，否则依赖包的代码已经被转换过一轮，字符串对不上就替换不到。
• 实际项目里这个值应该跟着构建环境走，写成 JSON.stringify(process.env.NODE_ENV || 'production')。写死成 'development' 会让依赖包保留所有开发期的警告和检查代码，生产产物会明显偏大。