StencilJS项目中如何在应用启动前启动MirageJS mock服务

方案1：使用Stencil全局脚本（最推荐，完全匹配你的需求） #

Stencil提供了全局脚本配置，会在整个应用所有组件加载之前执行，和React的index.ts作用完全一致。

• 第一步：在stencil.config.ts中添加全局脚本配置

import { Config } from '@stencil/core';

export const config: Config = {
  // 其他原有配置保持不变
  globalScript: 'src/global/init.ts',
  // 其他原有配置保持不变
};

• 第二步：新建src/global/init.ts文件，写入以下内容

import { Build } from '@stencil/core';
// 路径根据你的项目结构调整，对应mirage/server.ts的位置
import { makeServer } from '../../mirage/server';

// 仅在开发环境启动Mirage服务，避免打包到生产环境
if (Build.isDev) {
  makeServer();
}

这个方案执行时机最早，完全可以保证应用发起任何API请求之前Mirage已经完成启动拦截。

方案2：根组件生命周期初始化 #

如果你不想新增全局脚本，也可以在应用的根组件（比如app-root.tsx）的componentWillLoad生命周期钩子中调用：

import { Component, Build, ComponentWillLoad } from '@stencil/core';
import { makeServer } from '../../mirage/server';

@Component({
  tag: 'app-root',
  styleUrl: 'app-root.css',
  shadow: true,
})
export class AppRoot implements ComponentWillLoad {
  async componentWillLoad() {
    if (Build.isDev) {
      // 加await保证Mirage服务完全启动后再渲染子组件
      await makeServer();
    }
  }

  render() {
    // 原有根组件渲染逻辑保持不变
  }
}

这个方案执行时机稍晚于全局脚本，但也能保证根组件下所有子组件发起请求前Mirage已启动。

注意事项 #

• 不要省略开发环境判断逻辑，避免将Mirage代码打包到生产环境增大产物体积
• 如果你的Mirage配置了较长的seeds初始化逻辑，第二种方案加await可以避免前几个请求出现漏拦截的问题

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