使用 mocker-api 来手动启动一个 mock 服务

当项目脚手架没有自带 mock 服务时，如果我们要 mock 数据就需要手动启动一个 mock 服务，可以用 https://github.com/jaywcjlove/mocker-api 来搞定。

先 npm i mocker-api mockjs --save-dev 。

"scripts": {
  "mock": "mocker ./mock/index.js"
},
"devDependencies": {
  "mocker-api": "^2.9.5",
  "mockjs": "^1.1.0"
}

然后在项目根路径下新建 mock 文件夹，并添加 index.js ，文件内容如下：

// mock/index.js
const fs = require('fs')
const path = require('path')
const delay = require('mocker-api/lib/delay')

const mockApis = {}

// 把某个目录下的所有 .js 文件内容注入到 mockApis 中
const walk = dirPath => {
  fs.readdirSync(dirPath).forEach(name => {
    const filePath = path.join(dirPath, name)
    const stat = fs.statSync(filePath)

    if (stat.isDirectory()) {
      walk(filePath)
      return
    }

    if (
      stat.isFile() &&
      filePath.endsWith('.js') &&
      filePath !== 'mock/index.js'
    ) {
      // 把 "mock/user.js" 给替换为 "./user.js"
      const api = require(filePath.replace(/^mock/, '.'))
      Object.assign(mockApis, api)
    }
  })
}

walk('./mock')

module.exports = delay(mockApis, 500)

一个实际的 mock 文件举例：

// mock/a.js
const { mock } = require('mockjs')

module.exports = {
  'GET /api/a': (req, res) => {
    res.send(
      mock({
        code: 1001,
        message: 'success',
        'data|10': [
          {
            name: '@cname',
            age: '@integer(10, 50)',
          },
        ],
      })
    )
  },
}

需要启动 mock 服务的时候就 npm run mock ，会自动监听文件的变化的。

需要想启动 mock 服务同时启动其它的，可以比如这样 "start": "mocker ./mock/index.js & react-scripts start" ，这样 npm start 就会启动 mock 服务并启动前端项目。

findxc / blog

使用 mocker-api 来手动启动一个 mock 服务 #44