管理 worker

在浏览器中，MSW 注册一个 Service Worker 脚本 (mockServiceWorker.js)，允许它拦截应用的传出网络流量。下面，了解生成、验证和更新 worker 脚本的最佳实践。

¥In the browser, MSW registers a Service Worker script (mockServiceWorker.js) that allows it to intercept the outgoing network traffic of your application. Below, learn about the best practices of generating, verifying, and updating the worker script.

生成 worker 脚本

¥Generating the worker script

要生成 worker 脚本，请在项目的根目录中运行以下命令：

¥To generate the worker script, run the following command in your project’s root directory:

npx msw init <PUBLIC_DIR> --save

你必须将 <PUBLIC_DIR> 部分替换为应用公共目录的实际路径。你可以在此处了解有关此步骤的更多信息：

¥You’d have to replace the <PUBLIC_DIR> part with the actual path to your application’s public directory. You can learn more about this step here:

提交 worker 脚本

¥Committing the worker script

建议你在 Git 中提交 mockServiceWorker.js 工作脚本。这样，每个参与项目的人都可以启动并运行 MSW，而无需运行任何其他命令。

¥It is recommended you commit the mockServiceWorker.js worker script in Git. This way, everyone working on the project can get MSW up and running without having to run any additional commands.

或者，你可以将 worker 脚本视为生成的工件。如果你选择这样做，请确保自动化 worker 脚本生成，以便为从项目开始的每个人创建脚本。

¥Alternatively, you can treat the worker script as a generated artifact. If you chose to do so, make sure to automate the worker script generation so the script is created for everyone starting with the project.

提供 worker 脚本

¥Serving the worker script

msw init 的全部目的是将工作脚本复制到项目的根目录中，以便在运行时可用。你必须通过在浏览器中打开脚本的 URL 来确保你的应用正确地为 worker 脚本提供服务。

¥The entire point of msw init is to copy the worker script to your project’s root directory so it is available on runtime. You must ensure that your application is serving the worker script correctly by opening the script’s URL in the browser.

例如，如果你在 http://localhost:3000 上运行应用，则导航到 http://localhost:3000/mockServiceWorker.js 必须返回 worker 脚本的 application/javascript 内容。如果没有，你应该重复 生成步骤 或从头开始进行浏览器集成：

¥For example, if you are running your application at http://localhost:3000, navigating to http://localhost:3000/mockServiceWorker.js must return the application/javascript content of the worker script. If it doesn’t, you should repeat the generation step or go through the browser integration from the start:

更新 worker 脚本

¥Updating the worker script

MSW 的客户端代码可以在同一主要版本中选取任何工作脚本。仍然建议让工作脚本与已安装的 MSW 版本保持同步。这就是我们建议将 --save 标志与 msw init 命令一起使用的原因。

¥The client-side code of MSW can pick up any worker script within the same major version. It is still recommended to keep the worker script up-to-date with the installed version of MSW. That is why we recommend using the --save flag with the msw init command.

使用 --save 标志运行时，msw init 命令将在 package.json 中保存使用的公共路径。稍后，每当你升级或降级 msw 依赖时，它都会自动在保存的路径上生成工作脚本以保持同步。

¥When run with the --save flag, the msw init command will save the used public path in package.json. Later, whenever you upgrade or downgrade the msw dependency, it will automatically generate the worker script at the saved path to keep you in-sync.

// package.json
{
  "msw": {
    "workerDirectory": "./public"
  }
}

多个 worker 目录

¥Multiple worker directories

MSW 支持将公共目录数组作为 msw.workerDirectory 属性的值。当在 monorepo 中的多个包中使用 MSW 时，这尤其方便。

¥MSW supports an array of public directories as the value of the msw.workerDirectory property. This is especially handy when using MSW in multiple packages in a monorepo.

// package.json
{
  "name": "my-monorepo-root",
  "msw": {
    "workerDirectory": [
      // Include multiple public directories.
      "./packages/one/public",
      "./packages/two/static"
    ]
  }
}

每当你使用 --save 标志和之前未存储在 msw.workerDirectory 中的公共目录运行 msw init 时，MSW 都会自动将新的公共目录保存在你的 package.json 中。

¥Anytime you run msw init with the --save flag and a public directory not previously stored in msw.workerDirectory, MSW will automatically save the new public directory in your package.json.

如果你决定手动编辑 msw.workerDirectory，请确保它在 your project’s root-level package.json 中设置。

¥If you decide to manually edit msw.workerDirectory, make sure that it’s set in your project’s root-level package.json.