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

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

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

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

建置步骤

1. 安装相关套件

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

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

• handlers.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);

5. 在程序进入点新增判断启用 msw 的 worker

import { worker } from '/service/mocks/browser';

if (isTesting) {
    worker.start();
}

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

npx msw init public/

8. 在 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(),
 ]

9. 在 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>

10. 如果使用 Chrome 作为开发用的浏览器，前往 chrome://flags，并将以下选项设为 Enabled

• Allow 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

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