This is the second day of my participation in the More text Challenge. For more details, see more text Challenge

I’ve been working with Flyice for a while, and I’ve found the feature of local Mock data very useful. So I went to learn the specific implementation method.

Basic use of Mock data

The official documentation on Mock data is quite detailed, but I’ll give you a brief introduction here.

There is an existing project with the following directory structure

├ ─ ─ the mock │ └ ─ ─ index. The js ├ ─ ─ package. The json └ ─ ─ the sr └ ─ ─ API. JsCopy the code

The mock/index.js code is as follows

Export default {// support both GET and POST '/ API /users/1': {data: {}}, '/ API /foo/bar': {data: }, // support standard HTTP 'GET/API /users': {users: [1, 2]}, 'DELETE/API /users': {users: [1, 2]}, // support parameter 'POST/API /users/:id': (req, res) => {const {id} = req.params; res.send({ id: id }); }};Copy the code

After we enable the Mock service, we request the interface defined in Mock /index.js and get the response back.

Principle analysis of Mock data

The current Mock feature for Flyice is based on Webpack DevServer. The idea is to add middleware to the Express service created by Webpack DevServer to intercept and process requests.

Flyice has officially released this Express middleware as an NPM package named Webpack-dev-Mock. The webpack-dev-Mock code for intercepting requests is shown below:

app.use((req, res, next) => { const match = mockConfig.length && matchPath(req, mockConfig); if (match) { debug(`mock matched: [${match.method}] ${match.path}`); return match.handler(req, res, next); } else { return next(); }});Copy the code

MockConfig is the configuration generated based on the files in the mock directory of the project described above. The getConfig code snippet to generate the configuration is as follows:

function getConfig(rootDir: string, ignore: IIgnoreFolders) { // get mock files const mockFiles = glob.sync('mock/**/*.[jt]s', { cwd: rootDir, ignore, }).map(file => path.join(rootDir, file)); // Omit... const mockConfig = {}; mockFiles.forEach(mockFile => { if (fse.existsSync(mockFile)) { // disable require cache Object.keys(require.cache).forEach(file => { const winPathFile = winPath(file); if (winPathFile === mockFile || winPathFile.indexOf(mockDir) > -1) { debug(`delete cache ${file}`); delete require.cache[file]; }}); try { // eslint-disable-next-line import/no-dynamic-require, global-require const mockModule = require(mockFile); const mockData = mockModule.default || mockModule || {}; Object.assign(mockConfig, mockData); } catch (err) { console.log(err); }}}); return mockConfig; }Copy the code

At this point, you should be able to understand the basics of local data mocks. But surely many people have questions about how Webpack-dev-mock is used in WebPack DevServer.

This is actually done with devserver.before, as follows:

const webpackDevMock = require('webpack-dev-mock'); module.exports = (config, mock, context) => { // dev mock const { commandArgs, command } = context; if (! commandArgs.disableMock && command === 'start' && mock) { const originalDevServeBefore = config.devServer.get('before');  // replace devServer before function config.merge({ devServer: { before(app, server) { // set cors before all served files app.use((req, res, next) => { res.set('Access-Control-Allow-Origin', '*'); next(); }); const mockIgnore = Object.prototype.toString.call(mock) === '[object Object]' && mock.exclude; // keep mock server ahead of devServer.before webpackDevMock(app, mockIgnore || []); if (typeof originalDevServeBefore === 'function') { originalDevServeBefore(app, server); }}}}); }};Copy the code

As you can see, webpack-dev-Mock is used in the devServer before configuration to handle Express requests.

The practical application

Once you understand how this works, you can also add the ability to Mock local data to your own development projects. This is done by using webpack-dev-mock in the devserver.before configuration to process requests from the Express server.

A Vue Cli user can even encapsulate a mock plug-in based on webpack-dev-mock.

Other data

  1. Front end mock perfect solution for actual combat