Polymer 3 SPA迁移Workbox遇'process is not defined'报错求助

嘿，我来帮你搞定这个迁移时遇到的process is not defined报错！这个问题其实挺常见的，核心原因是Workbox的ES模块构建里带了Node.js环境特有的process变量，但浏览器里根本没有这个全局对象，而UMD版本做了浏览器兼容所以能正常跑。下面给你几个针对性的解决方案：

1. 先确认你用对了ES模块的导入路径 #

在Polymer 3的ES6模块代码里，导入workbox-window时别用默认的导入方式，得指定它的ES模块入口文件。比如把：

import { Workbox } from 'workbox-window';

改成：

import { Workbox } from 'workbox-window/build/index.mjs';

默认导入可能会指向CommonJS版本的文件，自然就会带Node环境的代码了。

2. 临时兼容：给浏览器补个process变量 #

如果改了导入路径还是报错，可以在你的SPA入口文件最顶部加一段代码，手动模拟Node的process环境：

// 给浏览器环境补上process变量兼容
if (typeof process === 'undefined') {
  window.process = {
    env: {
      NODE_ENV: 'production' // 开发环境就改成'development'
    }
  };
}

这是个快速救急的办法，能让依赖process的Workbox代码正常跑起来。

3. 调整Workbox CLI配置，避免内联Node环境代码 #

你配置里设了"inlineWorkboxRuntime": "true"，但在ES模块环境下，内联的Runtime代码可能混进了依赖process的逻辑。可以试试把这个选项改成false：

"inlineWorkboxRuntime": false,

然后单独在你的代码里导入Workbox Runtime的ES模块版本，这样能更精准地控制代码兼容性：

import 'workbox-runtime/build/index.mjs';

4. 换成稳定版Workbox试试 #

你用的是v5.0.0-beta版本，beta版难免有兼容性小问题。建议升级到最新的稳定版（比如v4.x的最终版或者v5+的正式版），这类ES模块的兼容性问题通常在稳定版里已经被修复了。

额外排查小技巧 #

• 打开生成的service-worker.js搜一下process，看看是不是有相关代码被打包进来了。如果有，定位到对应的Workbox模块，看看有没有替代的配置方式。
• 检查你的Polymer构建流程，确保Webpack/Rollup这类工具没有把Node环境的代码打包到浏览器端。

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