@qse/edu-scripts 1.13.7 → 1.13.9

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@qse/edu-scripts",
-  "version": "1.13.7",
+  "version": "1.13.9",
   "author": "Kinoko",
   "license": "MIT",
   "description": "教育工程化基础框架",
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
     "docs:deploy": "ssh-sftp",
-    "build": "father-build",
+    "build": "father build",
     "deploy": "node scripts/deploy && rimraf docs-dist",
     "release": "npm run build && npm publish && rimraf lib",
     "prettier": "prettier -c -w \"src/**/*.{js,jsx,tsx,ts,less,md,json}\"",
@@ -34,58 +34,61 @@
     "extends": "qsb-react"
   },
   "dependencies": {
-    "@babel/core": "~7.18.6",
-    "@babel/plugin-proposal-decorators": "~7.18.6",
-    "@babel/plugin-transform-runtime": "~7.18.6",
-    "@babel/preset-env": "~7.18.6",
+    "@babel/core": "~7.18.13",
+    "@babel/plugin-proposal-decorators": "~7.18.10",
+    "@babel/plugin-transform-runtime": "~7.18.10",
+    "@babel/preset-env": "~7.18.10",
     "@babel/preset-react": "~7.18.6",
     "@babel/preset-typescript": "~7.18.6",
-    "@babel/runtime": "~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",
-    "@svgr/webpack": "^7.0.0",
+    "@svgr/webpack": "^8.0.1",
     "babel-loader": "^8.3.0",
     "babel-plugin-import": "^1.13.6",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chalk": "^4.1.2",
-    "css-loader": "^6.7.3",
-    "cssnano": "^5.1.15",
+    "chokidar": "^3.5.3",
+    "cookie-parser": "^1.4.6",
+    "css-loader": "^6.8.1",
+    "cssnano": "^6.0.1",
     "esbuild-loader": "^2.21.0",
-    "file-loader": "^6.2.0",
+    "express": "^4.18.2",
     "filesize": "^8.0.7",
     "fs-extra": "^10.1.0",
     "globby": "^11.1.0",
     "gzip-size": "^6.0.0",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.5.3",
     "inquirer": "^8.2.5",
     "less": "^3.13.1",
     "less-loader": "^10.2.0",
     "lodash": "^4.17.21",
     "open": "^8.4.2",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.27",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^7.3.3",
     "postcss-momentum-scrolling": "^3.14.22",
     "postcss-normalize": "^8.0.1",
-    "postcss-preset-env": "^7.8.3",
-    "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.1.13",
-    "react-refresh": "^0.13.0",
+    "postcss-preset-env": "^9.1.0",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "react-refresh": "^0.14.0",
     "recursive-readdir": "^2.2.3",
     "rimraf": "^3.0.2",
-    "semver": "^7.3.8",
+    "semver": "^7.5.4",
     "strip-ansi": "^6.0.1",
-    "style-loader": "^3.3.2",
-    "tailwindcss": "^3.3.1",
-    "terser-webpack-plugin": "~5.3.7",
+    "style-loader": "^3.3.3",
+    "tailwindcss": "^3.3.3",
+    "terser-webpack-plugin": "~5.3.9",
     "tmp": "^0.2.1",
-    "typescript": "^4.9.5",
+    "typescript": "^5.1.6",
     "update-notifier": "^5.1.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.78.0",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-dev-server": "^4.13.2",
-    "yargs": "^17.7.1"
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-dev-server": "^4.15.1",
+    "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
@@ -93,7 +96,7 @@
     "@types/yargs": "^17.0.24",
     "dumi": "^1.1.50",
     "eslint-config-qsb-react": "^1.1.1",
-    "father-build": "^1.22.5",
+    "father": "^4.3.0",
     "jest": "^28.1.3"
   }
 }

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/webpackConfig.js

@@ -200,11 +200,14 @@ module.exports = function getWebpackConfig(args, override) {
       rules: [
         {
           oneOf: [
-            // 两个 babel-loader 是为了处理 pdfjs-dist 与 ofd.js
+            {
+              resourceQuery: /raw/,
+              type: 'asset/source',
+            },
             {
               test: /\.(j|t)sx?$/,
               loader: 'babel-loader',
-              include: paths.src,
+              exclude: /node_modules/,
               options: require('./babel')(),
             },
             (override.transformNodeModules || isProd) && {
@@ -314,6 +317,10 @@ module.exports = function getWebpackConfig(args, override) {
                 and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
               },
             },
+            {
+              test: /\.md$/,
+              type: 'asset/source',
+            },
             {
               // Exclude `js` files to keep "css" loader working as it injects
               // its runtime that would otherwise be processed through "file" loader.

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

@@ -9,7 +9,7 @@ export type BabelImportPlugin = [
     camel2DashComponentName?: boolean
     style?: boolean | 'css' | ((name: string) => string)
   },
-  string
+  string,
 ]
 export type BabelConfig = {
   presets: any[]
@@ -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