@qse/edu-scripts 1.13.8 → 1.13.9

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+## 1.13.9 (2023-08-10)
+
+- feat: 增加 mock 功能
+
 ## 1.13.8 (2023-07-25)
 
 - feat: 支持 markdown 导入

package/docs/feat.md

@@ -81,3 +81,87 @@ export default () => (
 为所有 `overflow: auto/scroll` 自动增加 `-webkit-overflow-scrolling: touch`
 
 为所有 `env(safe-area-inset-*)` 增加 fallback
+
+## Mock
+
+项目内建 mock 服务器，支持热更新，可以在 development 环境下使用
+
+mock 功能会根据 mock 文件夹自动判断是否开启
+
+可以通过 override.config.js 文件配置 mock 参数关闭该功能
+
+### 使用步骤
+
+根目录创建 mock 文件夹，在该文件夹下创建的所有 js、ts 文件都会被自动加载，可以创建多层级文件夹
+
+```js
+// path: /mock/index.js
+// path: /mock/depth/folder/index.js 支持深层文件
+
+import { defineMock } from '@qse/edu-scripts'
+
+export default defineMock({
+  'GET /api/test/test': { hello: 'world' },
+  'GET /api/test/test2': [1, 2, 3],
+  'POST /api/test2/test': (req, res) => {
+    console.log(req.body, req.cookies)
+    res.json({ foo: 'bar' })
+  },
+})
+```
+
+### mock 规则
+
+```ts
+import type { RequestHandler } from 'express'
+type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE'
+type API = string
+
+export type MockConfig = Record<
+  `${Method} ${API}`,
+  string | number | null | undefined | boolean | Record<string, any> | RequestHandler
+>
+
+export function defineMock(config: MockConfig) {
+  return config
+}
+```
+
+mock 名称是由 method 和 apiUrl 组成的，按这种规则去匹配
+
+所有 mock 文件最终会被合并到一起，形成一个大的对象。**所以当出现同名的 mock，前面的会被后面的覆盖**
+
+可以通过下面的方式去获取参数
+
+- `req.body` 获取 body 参数
+- `req.query` 获取链接上的参数
+- `req.cookies` 获取 cookies
+
+<Alert>mock 规则比 proxy 具有更高的优先级，如果匹配中了 mock，就会不再去 proxy 了</Alert>
+
+```ts
+// path: /mock/index.ts
+import Mock from 'mockjs'
+
+export default {
+  // method 必须是大写。可以直接返回数据
+  'GET /api/test': { hello: 'world' },
+
+  // 可以通过 express.requestHandler 处理请求。能实现自定义内容，发送文件等
+  'POST /api/test2': (req, res) => {
+    // 例如：将 body 内容返回
+    res.json(req.body)
+  },
+
+  // 可以通过第三方库生成 mock 数据
+  'POST /api/test3': Mock.mock({
+    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
+    'list|1-10': [
+      {
+        // 属性 id 是一个自增数，起始值为 1，每次增 1
+        'id|+1': 1,
+      },
+    ],
+  }),
+}
+```

package/docs/override.md

@@ -46,6 +46,13 @@ export type Config = {
    */
   proxy?: ProxyConfigArray
   extraPostCSSPlugins?: any[]
+  /**
+   * 开启 mock 功能，会自动加载 mock 文件夹下的文件
+   *
+   * 默认情况下自动判断根目录是否存在 mock 文件夹，如果存在则开启 mock 功能。
+   * 如果设置 false，会关闭 mock 功能
+   */
+  mock?: boolean
 }
 ```
 

package/lib/config/paths.js

@@ -30,6 +30,7 @@ var paths = {
   src: resolveApp("src"),
   public: resolveApp("public"),
   static: resolveApp("public", "static"),
-  theme: getExistPath(resolveApp("theme.json"), resolveApp("theme.js"))
+  theme: getExistPath(resolveApp("theme.json"), resolveApp("theme.js")),
+  mock: resolveApp("mock")
 };
 module.exports = paths;

package/lib/config/plugins/mock-server/defineMock.d.ts

@@ -0,0 +1,6 @@
+import type { RequestHandler } from 'express';
+type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE';
+type API = string;
+export type MockConfig = Record<`${Method} ${API}`, string | number | null | undefined | boolean | Record<string, any> | RequestHandler>;
+export declare function defineMock(config: MockConfig): MockConfig;
+export {};

package/lib/config/plugins/mock-server/defineMock.js

@@ -0,0 +1,31 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/config/plugins/mock-server/defineMock.ts
+var defineMock_exports = {};
+__export(defineMock_exports, {
+  defineMock: () => defineMock
+});
+module.exports = __toCommonJS(defineMock_exports);
+function defineMock(config) {
+  return config;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineMock
+});

package/lib/config/plugins/mock-server/index.js

@@ -0,0 +1,69 @@
+// src/config/plugins/mock-server/index.js
+var paths = require("../../paths");
+var globby = require("globby");
+var chokidar = require("chokidar");
+var debounce = require("lodash/debounce");
+var chalk = require("chalk");
+var fs = require("fs-extra");
+var express = require("express");
+var cookieParser = require("cookie-parser");
+var mockCache = {};
+var isSetup = false;
+var setupMock = debounce(function setupMock2() {
+  mockCache = {};
+  const files = globby.sync(paths.mock);
+  if (isSetup) {
+    console.log(chalk.green("Mock files changed, reloaded"));
+  } else {
+    isSetup = true;
+  }
+  for (const file of files) {
+    delete require.cache[require.resolve(file)];
+    try {
+      let mock = require(file);
+      mock = mock.default || mock;
+      mockCache = { ...mockCache, ...mock };
+    } catch (e) {
+      console.error(chalk.red(`Mock file ${file} error: ${e.message}`));
+    }
+  }
+  console.log("🚀 ~ file: index.js:47 ~ setupMock ~ mockCache:", mockCache);
+}, 100);
+function mockMiddlewave(req, res, next) {
+  const { method, path } = req;
+  const key = `${method.toUpperCase()} ${path}`;
+  const mock = mockCache[key];
+  console.log(chalk.green(`Mock: ${key}`));
+  if (mock) {
+    if (typeof mock === "function") {
+      mock(req, res, next);
+    } else {
+      res.json(mock);
+    }
+  } else {
+    next();
+  }
+}
+function setupMockServer(middelwaves, devServer) {
+  if (!fs.existsSync(paths.mock))
+    return;
+  require("@babel/register")({
+    presets: [["@babel/preset-env", { modules: "cjs" }], "@babel/preset-typescript"],
+    babelrc: false,
+    only: [/\/mock\//, /\/src\//],
+    extensions: [".js", ".ts"]
+  });
+  devServer.app.use(express.urlencoded({ extended: false }));
+  devServer.app.use(express.json());
+  devServer.app.use(cookieParser());
+  middelwaves.unshift({
+    name: "edu-scripts-mock-middelwave",
+    middleware: mockMiddlewave
+  });
+  console.log(
+    `<i> ${chalk.green.bold("[edu-scripts] Mock server created:")} ${chalk.cyan.bold(paths.mock)}`
+  );
+  chokidar.watch(paths.mock).on("all", setupMock);
+  return middelwaves;
+}
+module.exports = setupMockServer;

package/lib/config/webpackDevServerConfig.js

@@ -1,5 +1,6 @@
 // src/config/webpackDevServerConfig.js
 var WebpackDevServer = require("webpack-dev-server");
+var setupMockServer = require("./plugins/mock-server");
 module.exports = function getWebpackDevServerConfig(args, override) {
   const host = process.env.HOST || "0.0.0.0";
   const sockHost = process.env.WDS_SOCKET_HOST;
@@ -24,6 +25,12 @@ module.exports = function getWebpackDevServerConfig(args, override) {
       "Access-Control-Allow-Methods": "*",
       "Access-Control-Allow-Headers": "*"
     },
+    setupMiddlewares: (middlewares, devServer2) => {
+      if (override.mock !== false) {
+        setupMockServer(middlewares, devServer2);
+      }
+      return middlewares;
+    },
     proxy: [
       ...override.proxy,
       {

package/lib/index.d.ts

@@ -1 +1,2 @@
 export { defineConfig } from './utils/defineConfig';
+export { defineMock } from './config/plugins/mock-server/defineMock';

package/lib/index.js

@@ -19,11 +19,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  defineConfig: () => import_defineConfig.defineConfig
+  defineConfig: () => import_defineConfig.defineConfig,
+  defineMock: () => import_defineMock.defineMock
 });
 module.exports = __toCommonJS(src_exports);
 var import_defineConfig = require("./utils/defineConfig");
+var import_defineMock = require("./config/plugins/mock-server/defineMock");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  defineConfig
+  defineConfig,
+  defineMock
 });

package/lib/utils/defineConfig.d.ts

@@ -55,5 +55,12 @@ export type Config = {
      */
     proxy?: ProxyConfigArray;
     extraPostCSSPlugins?: any[];
+    /**
+     * 开启 mock 功能，会自动加载 mock 文件夹下的文件
+     *
+     * 默认情况下自动判断根目录是否存在 mock 文件夹，如果存在则开启 mock 功能。
+     * 如果设置 false，会关闭 mock 功能
+     */
+    mock?: boolean;
 };
 export declare function defineConfig(config: Config): Config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qse/edu-scripts",
-  "version": "1.13.8",
+  "version": "1.13.9",
   "author": "Kinoko",
   "license": "MIT",
   "description": "教育工程化基础框架",
@@ -40,6 +40,7 @@
     "@babel/preset-env": "~7.18.10",
     "@babel/preset-react": "~7.18.6",
     "@babel/preset-typescript": "~7.18.6",
+    "@babel/register": "~7.18.0",
     "@babel/runtime": "~7.18.9",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@qse/ssh-sftp": "^1.0.0",
@@ -48,9 +49,12 @@
     "babel-plugin-import": "^1.13.6",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chalk": "^4.1.2",
+    "chokidar": "^3.5.3",
+    "cookie-parser": "^1.4.6",
     "css-loader": "^6.8.1",
     "cssnano": "^6.0.1",
     "esbuild-loader": "^2.21.0",
+    "express": "^4.18.2",
     "filesize": "^8.0.7",
     "fs-extra": "^10.1.0",
     "globby": "^11.1.0",

package/src/config/paths.js

@@ -33,5 +33,6 @@ const paths = {
   public: resolveApp('public'),
   static: resolveApp('public', 'static'),
   theme: getExistPath(resolveApp('theme.json'), resolveApp('theme.js')),
+  mock: resolveApp('mock'),
 }
 module.exports = paths

package/src/config/plugins/mock-server/defineMock.ts

@@ -0,0 +1,12 @@
+import type { RequestHandler } from 'express'
+type Method = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE'
+type API = string
+
+export type MockConfig = Record<
+  `${Method} ${API}`,
+  string | number | null | undefined | boolean | Record<string, any> | RequestHandler
+>
+
+export function defineMock(config: MockConfig) {
+  return config
+}

package/src/config/plugins/mock-server/index.js

@@ -0,0 +1,92 @@
+const paths = require('../../paths')
+const globby = require('globby')
+const chokidar = require('chokidar')
+const debounce = require('lodash/debounce')
+const chalk = require('chalk')
+const fs = require('fs-extra')
+const express = require('express')
+const cookieParser = require('cookie-parser')
+let mockCache = {}
+let isSetup = false
+
+/**
+ * @param {import('webpack-dev-server').Middleware[]} middelwaves
+ */
+const setupMock = debounce(function setupMock() {
+  // clean
+  mockCache = {}
+
+  const files = globby.sync(paths.mock)
+
+  if (isSetup) {
+    console.log(chalk.green('Mock files changed, reloaded'))
+  } else {
+    isSetup = true
+  }
+
+  // setup
+  for (const file of files) {
+    delete require.cache[require.resolve(file)]
+    try {
+      let mock = require(file)
+      mock = mock.default || mock
+      mockCache = { ...mockCache, ...mock }
+    } catch (e) {
+      console.error(chalk.red(`Mock file ${file} error: ${e.message}`))
+    }
+  }
+  console.log('🚀 ~ file: index.js:47 ~ setupMock ~ mockCache:', mockCache)
+}, 100)
+
+/**
+ * @type {import('express').RequestHandler}
+ */
+function mockMiddlewave(req, res, next) {
+  const { method, path } = req
+  const key = `${method.toUpperCase()} ${path}`
+  const mock = mockCache[key]
+  console.log(chalk.green(`Mock: ${key}`))
+  if (mock) {
+    if (typeof mock === 'function') {
+      mock(req, res, next)
+    } else {
+      res.json(mock)
+    }
+  } else {
+    next()
+  }
+}
+
+/**
+ * @param {import('webpack-dev-server').Middleware[]} middelwaves
+ * @param {import('webpack-dev-server')} devServer
+ */
+function setupMockServer(middelwaves, devServer) {
+  if (!fs.existsSync(paths.mock)) return
+
+  require('@babel/register')({
+    presets: [['@babel/preset-env', { modules: 'cjs' }], '@babel/preset-typescript'],
+    babelrc: false,
+    only: [/\/mock\//, /\/src\//],
+    extensions: ['.js', '.ts'],
+  })
+
+  devServer.app.use(express.urlencoded({ extended: false }))
+  devServer.app.use(express.json())
+  devServer.app.use(cookieParser())
+
+  middelwaves.unshift({
+    name: 'edu-scripts-mock-middelwave',
+    middleware: mockMiddlewave,
+  })
+
+  console.log(
+    `<i> ${chalk.green.bold('[edu-scripts] Mock server created:')} ${chalk.cyan.bold(paths.mock)}`
+  )
+
+  chokidar.watch(paths.mock).on('all', setupMock)
+
+  return middelwaves
+}
+
+module.exports = setupMockServer

package/src/config/webpackDevServerConfig.js

@@ -1,4 +1,5 @@
 const WebpackDevServer = require('webpack-dev-server')
+const setupMockServer = require('./plugins/mock-server')
 
 /**
  * @param {*} args
@@ -30,6 +31,13 @@ module.exports = function getWebpackDevServerConfig(args, override) {
       'Access-Control-Allow-Methods': '*',
       'Access-Control-Allow-Headers': '*',
     },
+    setupMiddlewares: (middlewares, devServer) => {
+      if (override.mock !== false) {
+        setupMockServer(middlewares, devServer)
+      }
+
+      return middlewares
+    },
     proxy: [
       ...override.proxy,
       {

package/src/index.ts

@@ -1 +1,2 @@
 export { defineConfig } from './utils/defineConfig'
+export { defineMock } from './config/plugins/mock-server/defineMock'

package/src/utils/defineConfig.ts

@@ -57,6 +57,13 @@ export type Config = {
    */
   proxy?: ProxyConfigArray
   extraPostCSSPlugins?: any[]
+  /**
+   * 开启 mock 功能，会自动加载 mock 文件夹下的文件
+   *
+   * 默认情况下自动判断根目录是否存在 mock 文件夹，如果存在则开启 mock 功能。
+   * 如果设置 false，会关闭 mock 功能
+   */
+  mock?: boolean
 }
 export function defineConfig(config: Config) {
   return config