如何在NX monorepo的React应用中正确配置Service Worker

1. 修改Webpack配置，让service-worker.js走Babel转译 #

在Webpack的自定义配置块里添加规则，把service-worker.js交给babel-loader处理，复用NX React自带的Babel预设就能对齐项目的转译规则：

const { composePlugins, withNx } = require("@nx/webpack");
const { withReact } = require("@nx/react");

module.exports = composePlugins(
  withNx(),
  withReact({
    // svgr: false
  }),
  (config) => {
    // 新增规则处理service-worker.js
    config.module.rules.push({
      test: /service-worker\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@nx/react/babel', '@babel/preset-env']
        }
      }
    });

    return config;
  }
);

2. 从project.json的assets里移除service-worker.js #

之前为了解决MIME类型问题把它加到了assets里，但现在Webpack会转译并输出这个文件，再留着assets配置会导致原始未转译的文件被复制到构建目录，引发冲突。修改project.json的build配置：

{
  "targets": {
    "build": {
      "options": {
        "assets": [
          // 删掉"src/service-worker.js"这一项
          "src/favicon.ico",
          "src/assets"
        ]
      }
    }
  }
}

3. 检查Service Worker的注册路径 #

转译后的service-worker.js会被Webpack输出到构建目录的根路径（比如dist/apps/你的应用名），所以注册代码里的路径要对应：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(reg => console.log('Service Worker注册成功:', reg))
      .catch(err => console.log('Service Worker注册失败:', err));
  });
}

可选：用Workbox插件简化处理（如果用Workbox） #

如果你的Service Worker是基于Workbox开发的，直接集成workbox-webpack-plugin更省心，它会自动处理转译、生成缓存策略：

const { composePlugins, withNx } = require("@nx/webpack");
const { withReact } = require("@nx/react");
const { WorkboxPlugin } = require('workbox-webpack-plugin');

module.exports = composePlugins(
  withNx(),
  withReact(),
  (config) => {
    config.plugins.push(
      new WorkboxPlugin.GenerateSW({
        clientsClaim: true,
        skipWaiting: true,
        // 按需添加其他缓存配置
      })
    );
    return config;
  }
);

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