针对共享 Mirage 服务器开发 React 应用

一旦你准备好将你的 Mirage 服务器集中并共享在开发和测试之间，请按照以下步骤进行。

步骤 1：安装 Mirage

首先，确保你在项目中添加了 Mirage

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

步骤 2：定义共享服务器

定义共享服务器的常用位置是src/server.js

// src/server.js
import { createServer, Model } from "miragejs"

export function makeServer({ environment = "test" } = {}) {
  let server = createServer({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { name: "Bob" })
      server.create("user", { name: "Alice" })
    },

    routes() {
      this.namespace = "api"

      this.get("/users", (schema) => {
        return schema.users.all()
      })
    },
  })

  return server
}

在使用 Create React App 构建的应用程序中，确保此文件位于src/ 目录下，这样对它的更改就会触发重建。

我们添加到函数签名中的environment 参数只是一个约定。我们将其默认设置为test，因为在大多数应用程序中，你将在开发模式下调用makeServer 一次，但在test 中会调用多次（跨越你的各种测试文件）。

你可以随意更改签名。

步骤 3：在开发环境中启动服务器

打开你的 React 应用的引导文件（在 Create React App 中是src/index.js），导入你的makeServer 函数，并在开发环境中调用它

// src/index.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { makeServer } from "./server"

if (process.env.NODE_ENV === "development") {
  makeServer({ environment: "development" })
}

ReactDOM.render(<App />, document.getElementById("root"))

我们在这里使用process.env.NODE_ENV 环境变量，它是在许多 React 应用环境中可用的通用全局变量。条件语句允许 Mirage 在生产环境中被 tree-shaking，因此它不会影响你的生产包。

此外，请注意我们在这里传入{ environment: "development" }，这样 Mirage 的seeds() 就会加载，并且会有模拟延迟来帮助你在开发过程中。

就是这样！有了这段代码，无论你的应用程序中的任何组件在开发环境中发出网络请求，Mirage 都会拦截该请求，并使用你的服务器定义中的数据进行响应。

现在你拥有一个中心位置来定义和更新你的 Mirage 服务器，以便你在继续 React 应用的本地开发过程中。