工作散记 - 在本机开发环境建置MSW

MSW，顾名思义是使用 Service Worker 实作 API mocking 的套件，在今年的 JSDC 也有大大分享这个。主要看点之一就是它可以在 network 层发出真的 request，并且由 service worker 拦截请求，回传开发者设计的资料。

这在开发阶段 API 还没完成时，可以很方便前端先行开发，也很容易针对各种资料状况撰写测试。由于最近的开发需求是要前端先实作功能出来，所以就决定选这个套件来採坑看看，并且顺道熟悉 service worker 的运作。

MSW 的官方文件其实很简洁好懂，在写相关的 mocking code 其实还蛮好上手的。不过在建置阶段一度还卡蛮久的。所以想说特别写这篇记录一下，如果有人也跟我有障碍的也可以看看XD。

建置步骤

安装相关套件

yarn add -DW msw copy-webpack-plugin workbox-webpack-plugin

在根目录中建立 public 资料夹在 src 中建立 mocks 资料夹mocks 资料夹新增 handlers.ts & browser.tshandlers.ts

export const handlers = [    rest.get<null, IXXXOOO>('/api/example', (req, res, ctx) => {        return res(            ctx.status(200),            ctx.json({...baseApiResult, data: Dummy.SampleData})        );    }),    //...];

browser.ts

import { setupWorker } from 'msw';import { handlers } from './handlers'// This configures a Service Worker with the given request handlers.export const worker = setupWorker(...handlers);

在程式进入点新增判断启用 msw 的 worker

import { worker } from '/service/mocks/browser';if (isTesting) {    worker.start();}

执行msw的指令，在之前建立的 public目录下，产生 service worker 的程式档 mockServiceWorker.js

npx msw init public/

在 webpack 的设定档，新增跟 service worker 相关的设定

const CopyWebpackPlugin = require('copy-webpack-plugin');const WorkboxPlugin = require('workbox-webpack-plugin'); plugins: [     //...     new CopyWebpackPlugin([        { from: path.resolve(__dirname, '../public', 'mockServiceWorker.js'), to: 'mockServiceWorker.js' },    ]),    new WorkboxPlugin.GenerateSW(), ]

在 index.html 侦测当前浏览器有无支援 service worker，有的话就注册 mockServiceWorker.js

<script>    // Check that service workers are supported    if ('serviceWorker' in navigator) {        // Use the window load event to keep the page load performant        window.addEventListener('load', () => {            navigator.serviceWorker.register('/mockServiceWorker.js');        });    }</script>

如果使用 Chrome 作为开发用的浏览器，前往 chrome://flags，并将以下选项设为 EnabledAllow invalid certificates for resources loaded from localhost.Insecure origins treated as secure

其中，在 Insecure origins treated as secure 提供的文字栏位中，输入开发用的origin。输入完后点下面的 Relaunch 重新启用 Chrome

其实最一开始是尝试 https + openssl 产生 self-signed certificate ，允许浏览器下载 service worker 的 script。不过一直卡在 Chrome 没办法读到产出的凭证，如果有成功过的善心人士，希望可以跟我分享一下QQ

执行 webpack dev server，看到 dev console 有显示以下画面表示建置成功啰