閱讀需要一定Nodejs的相關知識，因為會擴充套件webpack的相關功能，並且實現需要遵守一定約定和Ajax封裝。沉澱的腳手架也放到Github上供給同學參考React-Starter， 使用手冊還沒寫完善， 整體思路和React還是Vue無關，如果對大家有收穫記得Star下。它有這些功能：
開發打包有不同配置eslint 驗證程式碼風格統一commit 規範驗證介面mock熱更新非同步元件Mock功能介紹市面上講前端mock怎麼做的文章很多，整體上閱讀下來的沒有一個真正站在前端角度上讓我覺得強大和易用的。下面就說下我期望的前端mock要有哪些功能：
mock功能和前端程式碼解耦一個介面支援多種mock情況無需依賴另外的後端服務和第三方庫能在network看到mock介面的請求且能區分mock資料、介面配置和頁面在同一個目錄下mock配置改變無需重啟前端dev生產打包可以把mock資料注入到打包的js中走前端mock對於後端已有的介面也能快速把Response資料轉化為mock資料上面的這些功能我講其中幾點的作用：
“
對於第7點的作用是後續專案開發完成，在完全沒有開發後端服務的情況下，也可以進行演示。這對於一些ToB定製的專案來沉澱專案地圖（案例）很有作用。對於第8點在開發環境後端服務經常不穩定下，不依賴後端也能做頁面開發，核心是能實現一鍵生成mock資料。
配置解耦耦合情況什麼是前端配置解耦，首先讓我們看下平時配置耦合情況有哪些：
webpack-dev後端測試環境變了需要改git跟蹤的程式碼dev和build的時候 需要改git跟蹤的程式碼開發的時候想這個介面mock 需要改git跟蹤的程式碼 mockUrl ,mock?如何解決前端依賴的配置解耦的思路是配置檔案conf.json是在dev或build的時候動態生成的，然後該檔案在前端專案引用:
├── config│ ├── conf.json # git 不跟蹤│ ├── config.js # git 不跟蹤│ ├── config_default.js│ ├── index.js│ └── webpack.config.js├── jsconfig.json├── mock.json # git 不跟蹤webpack配置檔案引入js的配置，生成conf.json
// config/index.jsconst _ = require("lodash");let config = _.cloneDeep(require("./config_default"))try { const envConfig = require('./config') // eslint-disable-line config = _.merge(config, envConfig);} catch (e) { // }module.exports = config;預設使用config_default.js 的內容，如果有config.js 則覆蓋，開發的時候複製config_default.js 為config.js 後續相關配置可以修改config.js即可。
// config/config_default.jsconst pkg = require("../package.json");module.exports = { projectName: pkg.name, version: pkg.version, port: 8888, proxy: { "/render-server/api/*": { target: `http://192.168.1.8:8888`, changeOrigin: true, // 支援跨域請求 secure: true, // 支援 https }, }, ... conf: { dev: { title: "前端模板", pathPrefix: "/react-starter", // 統一前端路徑字首 apiPrefix: "/api/react-starter", // debug: true, delay: 500, // mock資料模擬延遲 mock: { // "global.login": "success", // "global.loginInfo": "success", } }, build: { title: "前端模板", pathPrefix: "/react-starter", apiPrefix: "/api/react-starter", debug: false, mock: {} } }};在開發或打包的時候根據環境變數使用conf.dev或conf.build 生成conf.json檔案內容
// package.json{ "name": "react-starter", "version": "1.0.0", "description": "react前端開發腳手架", "main": "index.js", "scripts": { "start": "webpack-dev-server --config './config/webpack.config.js' --open --mode development", "build": "cross-env BUILD_ENV=VERSION webpack --config './config/webpack.config.js' --mode production --progress --display-modules && npm run tar", "build-mock": "node ./scripts/build-mock.js " }, ...}指定webpack路徑是./config/webpack.config.js
然後在webpack.config.js中引入配置並生成conf.json檔案
// config/webpack.config.jsconst config = require('.')const env = process.env.BUILD_ENV ? 'build' : 'dev'const confJson = env === 'build' ? config.conf.build : config.conf.devfs.writeFileSync(path.join(__dirname, './conf.json'), JSON.stringify(confGlobal, null, '\t'))在src/common/utils.jsx檔案中暴露出配置項，配置也可以透過window.conf來覆蓋
// src/common/utils.jsximport conf from '@/config/conf.json'export const config = Object.assign(conf, window.conf)然後就可以在各個頁面中使用
import {config} from '@src/common/utils'class App extends Component { render() { return ( <Router history={history}> <Switch> <Route path={`${config.pathPrefix}`} component={Home} /> <Redirect from="/" to={`${config.pathPrefix}`} /> </Switch> </Router> ) }}ReactDOM.render( <App />, document.getElementById('root'),)為了實現我們想要的mock的相關功能，首先是否開啟mock的配置解耦可以透過上面說的方式來實現，我們一般在頁面非同步請求的時候都會目錄定義一個io.js的檔案, 裡面定義了當前頁面需要呼叫的相關後端介面：
// src/pages/login/login-io.jsimport {createIo} from '@src/io'const apis = { // 登入 login: { method: 'POST', url: '/auth/login', }, // 登出 logout: { method: 'POST', url: '/auth/logout', },}export default createIo(apis, 'login') // 對應login-mock.json上面定義了登入和登出介面，我們希望對應開啟的mock請求能使用當前目錄下的login-mock.json檔案的內容
// src/pages/login/login-mock.json{ "login": { "failed": { "success": false, "code": "ERROR_PASS_ERROR", "content": null, "message": "賬號或密碼錯誤!" }, "success": { "success": true, "code": 0, "content": { "name": "admin", "nickname": "超級管理員", "permission": 15 }, "message": "" } }, "logout": { "success": { "success": true, "code": 0, "content": null, "message": "" } }}在呼叫logout登出這個Ajax請求的時候且我們的conf.json中配置的是"login.logout": "success" 就返回login-mock.json中的login.success 的內容，配置沒有匹配到就請求轉發到後端服務。
// config/conf.json{ "title": "前端後臺模板", "pathPrefix": "/react-starter", "apiPrefix": "/api/react-starter", "debug": true, "delay": 500, "mock": { "login.logout": "success" }}這是我們最終要實現的效果，這裡有一個約定：專案目錄下所有以-mock.jsom檔案結尾的檔案為mock檔案，且檔名不能重複。
思路在webpack配置項中devServer的proxy配置介面的轉發設定，介面轉發使用了功能強大的 http-proxy-middleware 軟體包， 我們約定proxy的配置格式是：
proxy: { "/api/react-starter/*": { target: `http://192.168.90.68:8888`, changeOrigin: true, secure: true, // onError: (), // onProxyRes, // onProxyReq }, },它有幾個事件觸發的配置：
option.onError 出現錯誤option.onProxyRes 後端響應後option.onProxyReq 請求轉發前option.onProxyReqWsoption.onOpenoption.onClose所以我們需要定製這幾個事情的處理，主要是請求轉發前和請求處理後
onProxyReq想在這裡來實現mock的處理， 如果匹配到了mock資料我們就直接響應，就不轉發請求到後端。怎麼做呢：思路是依賴請求頭，dev情況下前端在呼叫的時候能否注入約定好的請求頭 告訴我需要尋找哪個mock資料項， 我們約定Header：
mock-key 來匹配mock檔案如login-mock.json的內容， 如loginmock-method 來匹配對應檔案內容的方法項 如logout然後conf.json中mock配置尋找到具體的響應專案如："login.logout": "success/failed"的內容
onProxyRes如果呼叫了真實的後端請求，就把請求的響應資料快取下來，快取到api-cache目錄下檔案格式mock-key.mock-method.json
├── api-cache # git 不跟蹤│ ├── login.login.json│ └── login.logout.json// api-cache/global.logout.json{ "success": { "date": "2020-11-17 05:32:17", "method": "POST", "path": "/render-server/api/logout", "url": "/render-server/api/logout", "resHeader": { "content-type": "application/json; charset=utf-8", ... }, "reqHeader": { "host": "127.0.0.1:8888", "mock-key": "login", "mock-method": "logout" ... }, "query": {}, "reqBody": {}, "resBody": { "success": true, "code": 0, "content": null, "message": "" } }}這樣做的目的是為了後續實現一鍵生成mock檔案。
前端介面封裝使用上面我們看到定義了介面的io配置：
// src/pages/login/login-io.jsimport {createIo} from '@src/io'const apis = { // 登入 login: { method: 'POST', url: '/auth/login', }, // 登出 logout: { method: 'POST', url: '/auth/logout', },}export default createIo(apis, 'login') // login註冊到header的mock-key我們在store中使用
// src/pages/login/login-store.jsimport {observable, action, runInAction} from 'mobx'import io from './login-io'// import {config, log} from './utils'export class LoginStore { // 使用者資訊 @observable userInfo // 登陸操作 @action.bound async login(params) { const {success, content} = await io.login(params) if (!success) return runInAction(() => { this.userInfo = content }) }}export default LoginStore透過 createIo(apis, 'login') 的封裝在呼叫的時候就可以非常簡單的來傳遞請求引數，簡單模式下會判斷引數是到body還是到query中。複雜的也可以支援比如可以header，query, body等這裡不演示了。
createIo 請求封裝這個是前端介面封裝的關鍵地方，也是mock請求頭注入的地方
// src/io/index.jsximport {message, Modal} from 'antd'import {config, log, history} from '@src/common/utils'import {ERROR_CODE} from '@src/common/constant'import creatRequest from '@src/common/request'let mockData = {}try { // eslint-disable-next-line global-require, import/no-unresolved mockData = require('@/mock.json')} catch (e) { log(e)}let reloginFlag = false// 建立一個requestexport const request = creatRequest({ // 自定義的請求頭 headers: {'Content-Type': 'application/json'}, // 配置預設返回資料處理 action: (data) => { // 統一處理未登入的彈框 if (data.success === false && data.code === ERROR_CODE.UN_LOGIN && !reloginFlag) { reloginFlag = true // TODO 這裡可能統一跳轉到 也可以是彈窗點選跳轉 Modal.confirm({ title: '重新登入', content: '', onOk: () => { // location.reload() history.push(`${config.pathPrefix}/login?redirect=${window.location.pathname}${window.location.search}`) reloginFlag = false }, }) } }, // 是否錯誤顯示message showError: true, message, // 是否以丟擲異常的方式 預設false {success: boolean判斷} throwError: false, // mock 資料請求的等待時間 delay: config.delay, // 日誌列印 log,})// 標識是否是簡單傳引數， 值為true標識複雜封裝export const rejectToData = Symbol('flag')/** * 建立請求IO的封裝 * @param ioContent {any { url: string method?: string mock?: any apiPrefix?: string}} } * @param name mock資料的對應檔案去除-mock.json後的 */export const createIo = (ioContent, name = '') => { const content = {} Object.keys(ioContent).forEach((key) => { /** * @param {baseURL?: string, rejectToData?: boolean, params?: {}, query?: {}, timeout?: number, action?(data: any): any, headers?: {}, body?: any, data?: any, mock?: any} * @returns {message, content, code,success: boolean} */ content[key] = async (options = {}) => { // 這裡判斷簡單請求封裝 rejectToData=true 表示複雜封裝 if (!options[rejectToData]) { options = { data: options, } } delete options[rejectToData] if ( config.debug === false && name && config.mock && config.mock[`${name}.${key}`] && mockData[name] && mockData[name][key] ) { // 判斷是否是生產打包 mock注入到程式碼中 ioContent[key].mock = JSON.parse(JSON.stringify(mockData[name][key][config.mock[`${name}.${key}`]])) } else if (name && config.debug === true) { //注入 mock請求頭 if (options.headers) { options.headers['mock-key'] = name options.headers['mock-method'] = key } else { options.headers = {'mock-key': name, 'mock-method': key} } } const option = {...ioContent[key], ...options} option.url = ((option.apiPrefix ? option.apiPrefix : config.apiPrefix) || '') + option.url return request(option) } }) return content}這裡對request也做進一步的封裝，配置項設定了一些預設的處理設定。比如通用的請求響應失敗的是否有一個message， 未登入的情況是否有一個彈窗提示點選跳轉登陸頁。如果你想定義多個通用處理可以再建立一個request2和createIo2。
request封裝axios是基於axios的二次封裝， 並不是非常通用，主要是在約定的請求失敗和成功的處理有定製，如果需要可以自己修改使用。
import axios from 'axios'// 配置介面引數// declare interface Options {// url: string// baseURL?: string// // 預設GET// method?: Method// // 標識是否注入到data引數// rejectToData?: boolean// // 是否直接彈出message 預設是// showError?: boolean// // 指定 回撥操作 預設登入處理// action?(data: any): any// headers?: {// [index: string]: string// }// timeout?: number// // 指定路由引數// params?: {// [index: string]: string// }// // 指定url引數// query?: any// // 指定body 引數// body?: any// // 混合處理 Get到url, delete post 到body, 也替換路由引數 在createIo封裝// data?: any// mock?: any// }// ajax 請求的統一封裝// TODO 1. 對jsonp請求的封裝 2. 重複請求/** * 返回ajax 請求的統一封裝 * @param Object option 請求配置 * @param {boolean} opts.showError 是否錯誤呼叫message的error方法 * @param {object} opts.message 包含 .error方法 showError true的時候呼叫 * @param {boolean} opts.throwError 是否出錯丟擲異常 * @param {function} opts.action 包含 自定義預設處理 比如未登入的處理 * @param {object} opts.headers 請求頭預設content-type: application/json * @param {number} opts.timeout 超時 預設60秒 * @param {number} opts.delay mock請求延遲 * @returns {function} {params, url, headers, query, data, mock} data混合處理 Get到url, delete post 到body, 也替換路由引數 在createIo封裝 */export default function request(option = {}) { return async (optionData) => { const options = { url: '', method: 'GET', showError: option.showError !== false, timeout: option.timeout || 60 * 1000, action: option.action, ...optionData, headers: {'X-Requested-With': 'XMLHttpRequest', ...option.headers, ...optionData.headers}, } // 簡單請求處理 if (options.data) { if (typeof options.data === 'object') { Object.keys(options.data).forEach((key) => { if (key[0] === ':' && options.data) { options.url = options.url.replace(key, encodeURIComponent(options.data[key])) delete options.data[key] } }) } if ((options.method || '').toLowerCase() === 'get' || (options.method || '').toLowerCase() === 'head') { options.query = Object.assign(options.data, options.query) } else { options.body = Object.assign(options.data, options.body) } } // 路由引數處理 if (typeof options.params === 'object') { Object.keys(options.params).forEach((key) => { if (key[0] === ':' && options.params) { options.url = options.url.replace(key, encodeURIComponent(options.params[key])) } }) } // query 引數處理 if (options.query) { const paramsArray = [] Object.keys(options.query).forEach((key) => { if (options.query[key] !== undefined) { paramsArray.push(`${key}=${encodeURIComponent(options.query[key])}`) } }) if (paramsArray.length > 0 && options.url.search(/\?/) === -1) { options.url += `?${paramsArray.join('&')}` } else if (paramsArray.length > 0) { options.url += `&${paramsArray.join('&')}` } } if (option.log) { option.log('request options', options.method, options.url) option.log(options) } if (options.headers['Content-Type'] === 'application/json' && options.body && typeof options.body !== 'string') { options.body = JSON.stringify(options.body) } let retData = {success: false} // mock 處理 if (options.mock) { retData = await new Promise((resolve) => setTimeout(() => { resolve(options.mock) }, option.delay || 500), ) } else { try { const opts = { url: options.url, baseURL: options.baseURL, params: options.params, method: options.method, headers: options.headers, data: options.body, timeout: options.timeout, } const {data} = await axios(opts) retData = data } catch (err) { retData.success = false retData.message = err.message if (err.response) { retData.status = err.response.status retData.content = err.response.data retData.message = `瀏覽器請求非正常返回: 狀態碼 ${retData.status}` } } } // 自動處理錯誤訊息 if (options.showError && retData.success === false && retData.message && option.message) { option.message.error(retData.message) } // 處理Action if (options.action) { options.action(retData) } if (option.log && options.mock) { option.log('request response:', JSON.stringify(retData)) } if (option.throwError && !retData.success) { const err = new Error(retData.message) err.code = retData.code err.content = retData.content err.status = retData.status throw err } return retData }}根據api-cache下的介面快取和定義的xxx-mock.json檔案來生成。
# "build-mock": "node ./scripts/build-mock.js"# 所有：npm run build-mock mockAll # 單個mock檔案：npm run build-mock login# 單個mock介面：npm run build-mock login.logout# 複雜 npm run build-mock login.logout user具體程式碼參考build-mock.js
mock.json檔案生成為了在build打包的時候把mock資料注入到前端程式碼中去，使得mock.json檔案內容儘可能的小，會根據conf.json的配置項來動態生成mock.json的內容，如果build裡面沒有開啟mock項，內容就會是一個空json資料。當然後端介面代理處理記憶體中也映射了一份該mock.json的內容。這裡需要做幾個事情：
根據配置動態生成mock.json的內容監聽config資料夾 判斷關於mock的配置項是否有改變重新生成mock.json// scripts/webpack-init.js 在wenpack配置檔案中初始化const path = require('path')const fs = require('fs')const {syncWalkDir} = require('./util')let confGlobal = {}let mockJsonData = {}exports.getConf = () => confGlobalexports.getMockJson =() => mockJsonData/** * 初始化專案的配置 動態生成mock.json和config/conf.json * @param {string} env dev|build */ exports.init = (env = process.env.BUILD_ENV ? 'build' : 'dev') => { delete require.cache[require.resolve('../config')] const config = require('../config') const confJson = env === 'build' ? config.conf.build : config.conf.dev confGlobal = confJson // 1.根據環境變數來生成 fs.writeFileSync(path.join(__dirname, '../config/conf.json'), JSON.stringify(confGlobal, null, '\t')) buildMock(confJson) } // 生成mock檔案資料 const buildMock = (conf) => { // 2.動態生成mock資料 讀取src資料夾下面所有以 -mock.json結尾的檔案 儲存到io/index.json檔案當中 let mockJson = {} const mockFiles = syncWalkDir(path.join(__dirname, '../src'), (file) => /-mock.json$/.test(file)) console.log('build mocks: ->>>>>>>>>>>>>>>>>>>>>>>') mockFiles.forEach((filePath) => { const p = path.parse(filePath) const mockKey = p.name.substr(0, p.name.length - 5) console.log(mockKey, filePath) if (mockJson[mockKey]) { console.error(`有相同的mock檔名稱${p.name} 存在`, filePath) } delete require.cache[require.resolve(filePath)] mockJson[mockKey] = require(filePath) }) // 如果是打包環境， 最小化mock資源資料 const mockMap = conf.mock || {} const buildMockJson = {} Object.keys(mockMap).forEach((key) => { const [name, method] = key.split('.') if (mockJson[name][method] && mockJson[name][method][mockMap[key]]) { if (!buildMockJson[name]) buildMockJson[name] = {} if (!buildMockJson[name][method]) buildMockJson[name][method] = {} buildMockJson[name][method][mockMap[key]] = mockJson[name][method][mockMap[key]] } }) mockJsonData = buildMockJson fs.writeFileSync(path.join(__dirname, '../mock.json'), JSON.stringify(buildMockJson, null, '\t')) } // 監聽配置檔案目錄下的config.js和config_default.jsconst confPath = path.join(__dirname, '../config')if ((env = process.env.BUILD_ENV ? 'build' : 'dev') === 'dev') { fs.watch(confPath, async (event, filename) => { if (filename === 'config.js' || filename === 'config_default.js') { delete require.cache[path.join(confPath, filename)] delete require.cache[require.resolve('../config')] const config = require('../config') // console.log('config', JSON.stringify(config)) const env = process.env.BUILD_ENV ? 'build' : 'dev' const confJson = env === 'build' ? config.conf.build : config.conf.dev if (JSON.stringify(confJson) !== JSON.stringify(confGlobal)) { this.init() } } });}實現上面思路里面說的onProxyReq和onProxyRes 響應處理
util.js
// scripts/api-proxy-cache const fs = require('fs')const path = require('path')const moment = require('moment')const {getConf, getMockJson} = require('./webpack-init')const API_CACHE_DIR = path.join(__dirname, '../api-cache')const {jsonParse, getBody} = require('./util')fs.mkdirSync(API_CACHE_DIR,{recursive: true})module.exports = { // 代理前處理 onProxyReq: async (_, req, res) => { req.reqBody = await getBody(req) const {'mock-method': mockMethod, 'mock-key': mockKey} = req.headers // eslint-disable-next-line no-console console.log(`Ajax 請求: ${mockKey}.${mockMethod}`,req.method, req.url) // eslint-disable-next-line no-console req.reqBody && console.log(JSON.stringify(req.reqBody, null, '\t')) if (mockKey && mockMethod) { req.mockKey = mockKey req.mockMethod = mockMethod const conf = getConf() const mockJson = getMockJson() if (conf.mock && conf.mock[`${mockKey}.${mockMethod}`] && mockJson[mockKey] && mockJson[mockKey][mockMethod]) { // eslint-disable-next-line no-console console.log(`use mock data ${mockKey}.${mockMethod}:`, conf.mock[`${mockKey}.${mockMethod}`], 'color: green') res.mock = true res.append('isMock','yes') res.send(mockJson[mockKey][mockMethod][conf.mock[`${mockKey}.${mockMethod}`]]) } } }, // 響應快取介面 onProxyRes: async (res, req) => { const {method, url, query, path: reqPath, mockKey, mockMethod} = req if (mockKey && mockMethod && res.statusCode === 200) { let resBody = await getBody(res) resBody = jsonParse(resBody) const filePath = path.join(API_CACHE_DIR, `${mockKey}.${mockMethod}.json`) let data = {} if (fs.existsSync(filePath)) { data = jsonParse(fs.readFileSync(filePath).toString()) } const cacheObj = { date: moment().format('YYYY-MM-DD hh:mm:ss'), method, path: reqPath, url, resHeader: res.headers, reqHeader: req.headers, query, reqBody: await jsonParse(req.reqBody), resBody: resBody } if (resBody.success === false) { data.failed = cacheObj } else { data.success = cacheObj } // eslint-disable-next-line no-console fs.writeFile(filePath, JSON.stringify(data,'', '\t'), (err) => { err && console.log('writeFile', err)}) } }, // 後端服務沒啟的異常處理 onError(err, req, res) { setTimeout(() => { if (!res.mock) { res.writeHead(500, { 'Content-Type': 'text/plain', }); res.end('Something went wrong. And we are reporting a custom error message.'); } }, 10) }}在webpack配置中引入使用
const config = require('.')// config/webpack.config.jsconst {init} = require('../scripts/webpack-init');init();// 介面請求本地快取const apiProxyCache = require('../scripts/api-proxy-cache')for(let key in config.proxy) { config.proxy[key] = Object.assign(config.proxy[key], apiProxyCache);}const webpackConf = { devServer: { contentBase: path.join(__dirname, '..'), // 本地伺服器所載入的頁面所在的目錄 inline: true, port: config.port, publicPath: '/', historyApiFallback: { disableDotRule: true, // 指明哪些路徑對映到哪個html rewrites: config.rewrites, }, host: '127.0.0.1', hot: true, proxy: config.proxy, },}mock做好其實在我們前端實際中還是很有必要的，做過的專案如果後端被剷除了想要回憶就可以使用mock讓專案跑起來，可以尋找一些實現的效果來進行程式碼複用。當前介紹的mock流程實現有很多定製的開發，但是真正完成後，團隊中的成員只是使用還是比較簡單配置即可。
關於前端專案部署我也分享了一個BFF 層，當前做的還不是很完善，也分享給大家參考
Render-Server 主要功能包含：
一鍵部署 npm run deploy支援叢集部署配置是一個檔案服務是一個靜態資源服務線上視覺化部署前端專案配置熱更新線上Postman及介面文件支援前端路由渲染， 支援模板介面代理及路徑替換Web安全支援 Ajax請求驗證，Referer 校驗支援外掛開發和線上配置 可實現：前端模板引數注入、請求頭注入、IP白名單、介面mock、會話、第三方登陸等等
最新評論