@qse/edu-scripts 1.13.7 → 1.13.9

package/CHANGELOG.md

@@ -1,8 +1,21 @@
 # 更新日志
 
+## 1.13.9 (2023-08-10)
+
+- feat: 增加 mock 功能
+
+## 1.13.8 (2023-07-25)
+
+- feat: 支持 markdown 导入
+- feat: 支持 `import content from '*?raw'` 导入规则
+- feat: babel-loader include 修改成 exclude: /node_modules/
+- chore: 升级打包工具
+- chore: 升级依赖版本，尝试移除 stable 依赖警告
+- chore: 最低 nodejs 版本要求 14
+
 ## 1.13.7 (2023-07-20)
 
-- feat: 关闭 derServer.client.overlay.runtimeError 
+- feat: 关闭 derServer.client.overlay.runtimeError
 
 ## 1.13.6 (2023-06-13)
 

package/app.d.ts

@@ -46,6 +46,16 @@ declare module '*.webp' {
   export default src
 }
 
+declare module '*.md' {
+  const content: string
+  export default content
+}
+
+declare module '*?raw' {
+  const content: string
+  export default content
+}
+
 declare module '*.svg' {
   import * as React from 'react'
 

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/auto-refactor.js

@@ -1,21 +1,13 @@
-"use strict";
-
-const fs = require('fs-extra');
-const paths = require('./config/paths');
-const path = require('path');
-const chalk = require('chalk');
-const pkg = require('../package.json');
-const glob = require('globby');
-const ora = require('ora');
-const {
-  prompt
-} = require('inquirer');
-const open = require('open');
-
-/**
- * @param {string} msg
- * @param {(spinner:ora.Ora) => void | Promise<void>} callback
- */
+// src/auto-refactor.js
+var fs = require("fs-extra");
+var paths = require("./config/paths");
+var path = require("path");
+var chalk = require("chalk");
+var pkg = require("../package.json");
+var glob = require("globby");
+var ora = require("ora");
+var { prompt } = require("inquirer");
+var open = require("open");
 async function step(msg, callback) {
   const spinner = ora(msg).start();
   try {
@@ -28,105 +20,102 @@ async function step(msg, callback) {
 }
 module.exports = async function autoRefactor() {
   if (await fs.pathExists(paths.public)) {
-    console.log(chalk.green('已完成改造，不需要重复执行，如果运行报错请查看文档'));
+    console.log(chalk.green("已完成改造，不需要重复执行，如果运行报错请查看文档"));
     console.log(`文档: ${chalk.underline(pkg.homepage)}`);
     process.exit(0);
   }
   const appPkg = require(paths.package);
-  const answers = await prompt([{
-    type: 'input',
-    name: 'name',
-    message: '请输入模块名称，要求唯一，不能与其他工程相同',
-    default: appPkg.name,
-    validate: v => /^[a-z][a-z0-9_-]+$/.test(v) || '请按格式输入 /^[a-z][a-z0-9_-]+$/ 只能使用小写字母、连字符、下划线'
-  }, {
-    type: 'input',
-    name: 'version',
-    message: '版本号',
-    default: '1.0.0',
-    validate: v => /^\d+\.\d+\.\d+$/.test(v) || '请按格式输入 /^\\d+\\.\\d+\\.\\d+$/ 例如: 1.0.0'
-  }, {
-    type: 'list',
-    name: 'mode',
-    message: '项目使用的哪种模式',
-    choices: [{
-      name: '教育子工程模式',
-      value: ''
-    }, {
-      name: '教育主工程模式',
-      value: 'main'
-    }, {
-      name: '独立模式',
-      value: 'single'
-    }]
-  }, {
-    type: 'checkbox',
-    name: 'deploy',
-    message: '项目需要部署到哪里',
-    when: ans => ans.mode !== 'single',
-    choices: [{
-      name: '校端',
-      value: '-s'
-    }, {
-      name: '局端',
-      value: '-b'
-    }, {
-      name: '公文端',
-      value: '-d'
-    }],
-    validate: v => !!v && v.length > 0 || '必须选一个'
-  }]);
+  const answers = await prompt([
+    {
+      type: "input",
+      name: "name",
+      message: "请输入模块名称，要求唯一，不能与其他工程相同",
+      default: appPkg.name,
+      validate: (v) => /^[a-z][a-z0-9_-]+$/.test(v) || "请按格式输入 /^[a-z][a-z0-9_-]+$/ 只能使用小写字母、连字符、下划线"
+    },
+    {
+      type: "input",
+      name: "version",
+      message: "版本号",
+      default: "1.0.0",
+      validate: (v) => /^\d+\.\d+\.\d+$/.test(v) || "请按格式输入 /^\\d+\\.\\d+\\.\\d+$/ 例如: 1.0.0"
+    },
+    {
+      type: "list",
+      name: "mode",
+      message: "项目使用的哪种模式",
+      choices: [
+        { name: "教育子工程模式", value: "" },
+        { name: "教育主工程模式", value: "main" },
+        { name: "独立模式", value: "single" }
+      ]
+    },
+    {
+      type: "checkbox",
+      name: "deploy",
+      message: "项目需要部署到哪里",
+      when: (ans) => ans.mode !== "single",
+      choices: [
+        { name: "校端", value: "-s" },
+        { name: "局端", value: "-b" },
+        { name: "公文端", value: "-d" }
+      ],
+      validate: (v) => !!v && v.length > 0 || "必须选一个"
+    }
+  ]);
   appPkg.name = answers.name;
   appPkg.version = answers.version;
-  await step('创建 public 文件夹', async () => {
+  await step("创建 public 文件夹", async () => {
     await fs.mkdir(paths.public);
   });
-  await step('移动 js 文件夹', async () => {
-    if (await fs.pathExists(path.resolve(paths.src, 'js'))) {
-      await fs.move(path.resolve(paths.src, 'js'), path.resolve(paths.public, 'js'));
+  await step("移动 js 文件夹", async () => {
+    if (await fs.pathExists(path.resolve(paths.src, "js"))) {
+      await fs.move(path.resolve(paths.src, "js"), path.resolve(paths.public, "js"));
     }
   });
-  await step('移动 html 文件', async () => {
-    const HTMLFiles = await glob('*.html', {
-      cwd: paths.src
-    });
+  await step("移动 html 文件", async () => {
+    const HTMLFiles = await glob("*.html", { cwd: paths.src });
     for (const file of HTMLFiles) {
       await fs.move(path.resolve(paths.src, file), path.resolve(paths.public, file));
     }
   });
-  await step('删除 dll 文件夹', async () => {
-    if (await fs.pathExists(path.resolve(paths.src, 'dll'))) {
-      await fs.remove(path.resolve(paths.src, 'dll'));
+  await step("删除 dll 文件夹", async () => {
+    if (await fs.pathExists(path.resolve(paths.src, "dll"))) {
+      await fs.remove(path.resolve(paths.src, "dll"));
     }
   });
-  await step('删除没用的 babel 和 webpack 配置', async () => {
-    const deleteFiles = [...(await glob('{.,*}babel*')), ...(await glob('*webpack*')), ...(await glob('package-lock.json')), paths.nodeModules, paths.sshSftp];
+  await step("删除没用的 babel 和 webpack 配置", async () => {
+    const deleteFiles = [
+      ...await glob("{.,*}babel*"),
+      ...await glob("*webpack*"),
+      ...await glob("package-lock.json"),
+      paths.nodeModules,
+      paths.sshSftp
+    ];
     for (const filePath of deleteFiles) {
       await fs.remove(filePath);
     }
   });
-  await step('设置项目模式', () => {
+  await step("设置项目模式", () => {
     if (answers.mode) {
-      appPkg.edu = {
-        mode: answers.mode
-      };
+      appPkg.edu = { mode: answers.mode };
     }
   });
-  await step('修改 package.json 的 scripts', () => {
+  await step("修改 package.json 的 scripts", () => {
     const scripts = appPkg.scripts;
-    scripts.start = 'edu-scripts start';
-    scripts.build = 'edu-scripts build';
-    scripts.analyze = 'edu-scripts build --analyze';
-    if (answers.mode !== 'single') {
-      scripts.deploy = `edu-scripts deploy ${answers.deploy.join(' ')}`;
+    scripts.start = "edu-scripts start";
+    scripts.build = "edu-scripts build";
+    scripts.analyze = "edu-scripts build --analyze";
+    if (answers.mode !== "single") {
+      scripts.deploy = `edu-scripts deploy ${answers.deploy.join(" ")}`;
     } else {
       scripts.deploy = `edu-scripts deploy`;
-      scripts['commit-dist'] = 'edu-scripts commit-dist --rm-local';
+      scripts["commit-dist"] = "edu-scripts commit-dist --rm-local";
     }
-    scripts['one-key-deploy'] = 'npm version patch';
-    scripts.postversion = 'npm run build && npm run deploy';
+    scripts["one-key-deploy"] = "npm version patch";
+    scripts.postversion = "npm run build && npm run deploy";
   });
-  await step('删除 babel/webpack 相关依赖', spinner => {
+  await step("删除 babel/webpack 相关依赖", (spinner) => {
     const deleteRe = /(babel|autoprefixer|webpack|loader|less|css|sass|hmr|ssh-sftp|regenerator-runtime|nowa|prettier)/i;
     const deletePkgs = {
       dependencies: [],
@@ -143,16 +132,20 @@ module.exports = async function autoRefactor() {
       }
     });
     spinner.clear();
-    console.log(`删除的pkgs\n${chalk.green(JSON.stringify(deletePkgs, null, 2))}\n`);
-    appPkg.devDependencies['@qse/edu-scripts'] = '^' + pkg.version;
+    console.log(`删除的pkgs
+${chalk.green(JSON.stringify(deletePkgs, null, 2))}
+`);
+    appPkg.devDependencies["@qse/edu-scripts"] = "^" + pkg.version;
   });
-  await fs.writeFile(paths.package, JSON.stringify(appPkg, null, 2), 'utf-8');
+  await fs.writeFile(paths.package, JSON.stringify(appPkg, null, 2), "utf-8");
   open(`${pkg.homepage}#/refactor`);
-  console.log(chalk.green(`
+  console.log(
+    chalk.green(`
   改造还未完成，剩余步骤请查看文档
   ${pkg.homepage}#/refactor
 
   运行 npm i 安装依赖
   运行 edu-scripts start 启动服务
-  `));
-};
+  `)
+  );
+};

package/lib/build.js

@@ -1,65 +1,62 @@
-"use strict";
-
-process.env.NODE_ENV = 'production';
-process.env.BABEL_ENV = 'production';
-process.env.BROWSERSLIST = '>0.2%, not dead, not op_mini all';
-const webpack = require('webpack');
-const chalk = require('chalk');
-const getConfig = require('./utils/getConfig');
-const {
+// src/build.js
+process.env.NODE_ENV = "production";
+process.env.BABEL_ENV = "production";
+process.env.BROWSERSLIST = ">0.2%, not dead, not op_mini all";
+var webpack = require("webpack");
+var chalk = require("chalk");
+var getConfig = require("./utils/getConfig");
+var {
   measureFileSizesBeforeBuild,
   printFileSizesAfterBuild
-} = require('./utils/FileSizeReporter');
-const paths = require('./config/paths');
-const fs = require('fs-extra');
-const appConfig = require('./utils/appConfig');
-const WARN_AFTER_BUNDLE_GZIP_SIZE = appConfig.single ? 1024 * 1024 : 30 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+} = require("./utils/FileSizeReporter");
+var paths = require("./config/paths");
+var fs = require("fs-extra");
+var appConfig = require("./utils/appConfig");
+var WARN_AFTER_BUNDLE_GZIP_SIZE = appConfig.single ? 1024 * 1024 : 30 * 1024;
+var WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 module.exports = async function build(args) {
   if (args.analyze) {
-    process.env.ANALYZE = '1';
+    process.env.ANALYZE = "1";
   }
   if (args.outputHtml) {
-    process.env.OUTPUT_HTML = '1';
+    process.env.OUTPUT_HTML = "1";
   }
   const previousSizeMap = await measureFileSizesBeforeBuild(paths.dist);
   fs.emptyDirSync(paths.dist);
   if (appConfig.single) {
-    fs.copySync(paths.public, paths.resolveApp('dist'));
+    fs.copySync(paths.public, paths.resolveApp("dist"));
   }
   if (appConfig.mainProject && fs.existsSync(paths.static)) {
-    fs.copySync(paths.static, paths.resolveApp('dist', 'static'));
+    fs.copySync(paths.static, paths.resolveApp("dist", "static"));
   }
   webpack(getConfig(args), (error, stats) => {
     if (error) {
-      console.log(chalk.red('编译失败'));
+      console.log(chalk.red("编译失败"));
       console.log(chalk.red(error.message || error));
       console.log();
       process.exit(1);
     }
     if (stats.compilation.errors.length) {
-      console.log(chalk.red('编译失败'));
-      console.log(stats.toString({
-        all: false,
-        errors: true,
-        colors: true
-      }));
+      console.log(chalk.red("编译失败"));
+      console.log(stats.toString({ all: false, errors: true, colors: true }));
       process.exit(1);
     }
-    console.log(stats.toString({
-      colors: true,
-      preset: 'errors-warnings',
-      timings: true
-    }));
+    console.log(stats.toString({ colors: true, preset: "errors-warnings", timings: true }));
     console.log();
-    console.log('gzip 后文件大小:\n');
-    printFileSizesAfterBuild(stats, previousSizeMap, paths.dist, WARN_AFTER_BUNDLE_GZIP_SIZE, WARN_AFTER_CHUNK_GZIP_SIZE);
+    console.log("gzip 后文件大小:\n");
+    printFileSizesAfterBuild(
+      stats,
+      previousSizeMap,
+      paths.dist,
+      WARN_AFTER_BUNDLE_GZIP_SIZE,
+      WARN_AFTER_CHUNK_GZIP_SIZE
+    );
     console.log();
     if (appConfig.single) {
-      console.log(`打包完成，可以使用 ${chalk.green('@qse/ssh-sftp')} 自动部署代码到 v1`);
+      console.log(`打包完成，可以使用 ${chalk.green("@qse/ssh-sftp")} 自动部署代码到 v1`);
     } else {
-      console.log(`打包完成，可以运行 ${chalk.green('npx edu-scripts deploy')} 部署代码到 v1`);
+      console.log(`打包完成，可以运行 ${chalk.green("npx edu-scripts deploy")} 部署代码到 v1`);
     }
     console.log();
   });
-};
+};

package/lib/cli.js

@@ -1,63 +1,66 @@
 #!/usr/bin/env node
-"use strict";
 
-const pkg = require('../package.json');
-
-// 检查运行条件
-require('./utils/beforeStart');
-
-// eslint-disable-next-line no-unused-expressions
-require('yargs').usage(`教育工程化 webpack5 基础框架\n文档: ${pkg.homepage}`).command('start', '开发', yargs => yargs.option('port', {
-  alias: 'p',
-  desc: '指定端口'
-}).option('open', {
-  desc: '启动后打开页面'
-}), args => require('./start')(args)).command('build', '打包', yargs => yargs.option('analyze', {
-  alias: 'a',
-  desc: '分析代码',
-  default: false,
-  boolean: true
-}).option('output-html', {
-  alias: 'o',
-  desc: '输出 html 文件',
-  default: false,
-  boolean: true
-}), args => require('./build')(args)).command('deploy', '自动部署 dist 到 v1 服务器', yargs => yargs.option('school', {
-  alias: 's',
-  desc: '上传到校端',
-  default: false,
-  boolean: true
-}).option('bureau', {
-  alias: 'b',
-  desc: '上传到局端',
-  default: false,
-  boolean: true
-}).option('documentshelves', {
-  alias: 'd',
-  desc: '上传到公文',
-  default: false,
-  boolean: true
-}), args => require('./deploy')(args)).command(['generator', 'g'], '自动生成代码', yargs => yargs.command('page', '生成 page 模版, 默认根据环境生成 js/ts 与 less 文件', yargs => yargs.option('name', {
-  desc: '模块名称',
-  string: true
-}).demandOption('name', '必须输入模块名称').option('ts', {
-  alias: 't',
-  desc: '生成 ts 文件',
-  boolean: true,
-  default: true
-}).option('route', {
-  alias: 'r',
-  desc: '生成 index.js 路由文件',
-  boolean: true,
-  default: true
-}).option('fc', {
-  alias: 'f',
-  desc: '生成 Function Component 文件',
-  boolean: true
-}), args => require('./generator').page(args)).command('override', '创建 override 文件', {}, args => require('./generator').override(args)).command('tailwind', '创建 tailwind 文件', {}, args => require('./generator').tailwind(args)).command('ts', '创建 tsconfig 文件', {}, args => require('./generator').ts(args)).showHelpOnFail(true).demandCommand(1, '')).command('auto-refactor', '自动改造项目', {}, () => require('./auto-refactor')()).command('commit-dist', '提交 dist 目录到 dist 分支', yargs => yargs.option('rm-local', {
-  desc: '提交完后删除本地 dist',
-  type: 'boolean'
-}), args => require('./commit-dist')(args)).showHelpOnFail(true).demandCommand(1, '').alias({
-  v: 'version',
-  h: 'help'
-}).argv;
+// src/cli.js
+var pkg = require("../package.json");
+require("./utils/beforeStart");
+require("yargs").usage(`教育工程化 webpack5 基础框架
+文档: ${pkg.homepage}`).command(
+  "start",
+  "开发",
+  (yargs) => yargs.option("port", { alias: "p", desc: "指定端口" }).option("open", { desc: "启动后打开页面" }),
+  (args) => require("./start")(args)
+).command(
+  "build",
+  "打包",
+  (yargs) => yargs.option("analyze", {
+    alias: "a",
+    desc: "分析代码",
+    default: false,
+    boolean: true
+  }).option("output-html", {
+    alias: "o",
+    desc: "输出 html 文件",
+    default: false,
+    boolean: true
+  }),
+  (args) => require("./build")(args)
+).command(
+  "deploy",
+  "自动部署 dist 到 v1 服务器",
+  (yargs) => yargs.option("school", { alias: "s", desc: "上传到校端", default: false, boolean: true }).option("bureau", { alias: "b", desc: "上传到局端", default: false, boolean: true }).option("documentshelves", {
+    alias: "d",
+    desc: "上传到公文",
+    default: false,
+    boolean: true
+  }),
+  (args) => require("./deploy")(args)
+).command(
+  ["generator", "g"],
+  "自动生成代码",
+  (yargs) => yargs.command(
+    "page",
+    "生成 page 模版, 默认根据环境生成 js/ts 与 less 文件",
+    (yargs2) => yargs2.option("name", { desc: "模块名称", string: true }).demandOption("name", "必须输入模块名称").option("ts", { alias: "t", desc: "生成 ts 文件", boolean: true, default: true }).option("route", {
+      alias: "r",
+      desc: "生成 index.js 路由文件",
+      boolean: true,
+      default: true
+    }).option("fc", { alias: "f", desc: "生成 Function Component 文件", boolean: true }),
+    (args) => require("./generator").page(args)
+  ).command(
+    "override",
+    "创建 override 文件",
+    {},
+    (args) => require("./generator").override(args)
+  ).command(
+    "tailwind",
+    "创建 tailwind 文件",
+    {},
+    (args) => require("./generator").tailwind(args)
+  ).command("ts", "创建 tsconfig 文件", {}, (args) => require("./generator").ts(args)).showHelpOnFail(true).demandCommand(1, "")
+).command("auto-refactor", "自动改造项目", {}, () => require("./auto-refactor")()).command(
+  "commit-dist",
+  "提交 dist 目录到 dist 分支",
+  (yargs) => yargs.option("rm-local", { desc: "提交完后删除本地 dist", type: "boolean" }),
+  (args) => require("./commit-dist")(args)
+).showHelpOnFail(true).demandCommand(1, "").alias({ v: "version", h: "help" }).argv;