@qse/edu-scripts 0.0.0-beta.2 → 0.0.0-beta.4

package/docs/feat.md

@@ -1,167 +0,0 @@
-# 特性
-
-## svg 模块导出
-
-默认导出 `dataURI`，额外导出 `ReactComponent`
-
-两种使用方式是相同的
-
-```tsx | pure
-import logoURI, { ReactComponent as Logo } from './logo.svg'
-
-export default () => (
-  <>
-    <img src={logoURI} />
-    <Logo />
-  </>
-)
-```
-
-## 复制 public 文件
-
-`edu-scripts build` 会复制 `public` 或 `public/static` 文件到 `dist` 中
-
-教育子工程不会复制
-
-## 支持 typescript
-
-如果要开启 typescrit，只需要运行 `npx edu g ts`
-
-## 生成页面模版
-
-可以自动生成页面模版
-
-运行 `npx edu g page -h` 查看详细信息
-
-## 支持[自定义配置](override.md)
-
-运行 `npx edu g override` 生成控制文件
-
-## 自动根据 qsb 的 CDN 调整内部配置
-
-根据 `public/*.html` 文件里的 CDN 按需自动配置 externals 与 dll
-
-### CDN 匹配关键字
-
-`/react16.14.*_common31?.js/`
-
-- external: `react`, `react-dom`, `natty-fetch`, `natty-store`, `common-utils`
-- 添加内置的 dll 文件
-
-`/react16.14.*_axios0.21.1/`
-
-- external: `react`, `react-dom`, `natty-fetch`, `natty-store`, `common-utils`, `axios`
-
-`moment2.29.1.js`
-
-- external: `moment`
-
-`antd3.26.20.js`
-
-- external: `react`, `react-dom`, `moment`, `antd`
-
-如果使用 `antd3.26.20.js` 将额外执行下列规则
-
-`qsb-antd.min.js`
-
-- external: `@qsb/antd`, `@qse/antd`
-
-`qsb-scheme-render.min.js`
-
-- external: `@qsb/scheme-render` `@qse/scheme-render`
-
-## 支持 tailwindcss
-
-如果要开启 tailwindcss，只需要运行 `npx edu g tailwind`
-
-## PostCSS
-
-预处理很多样式[兼容性问题](https://preset-env.cssdb.org/features/#stage-2)
-
-为所有 `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/grayscale.md

@@ -1,31 +0,0 @@
-# 灰度测试
-
-## 开启灰度测试
-
-### PC 端
-
-前端只要在 `package.json` 文件中加入 `grayscale` 字段即可
-
-```json
-{
-  "name": "模块名称",
-  "edu": { "grayscale": true }
-}
-```
-
-此时打包出来的模块就成了灰度测试用的模块，会部署到指定的目录下，主工程会处理调度问题
-
-模块名称可与运维讨论
-
-后端接口会由 `nginx` 处理，前端不需要关注
-
-### H5 端
-
-h5 与 pc 是完全不同的方案，前端是需要将代码部署到两个地方。
-
-`/project-name` 与 `/beta_project-name`。第二个名字需要去问运维要
-
-#### 流程
-
-1. 访问 `/qsxxwapdev/project-name/index.html`
-2. 网关拦截 `index.html` 请求，并根据后台灰度配置进行分流，分别进入`/qsxxwapdev/project-name/index1.html` 与 `/qsxxwapdev/beta_project-name/index1.html`

package/docs/index.md

@@ -1,15 +0,0 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: '@qse/edu-scripts'
-  text: 教育工程化基础框架
-  actions:
-    - theme: brand
-      text: 快速开始
-      link: /install
-features:
-  - title: rspack重构
-    details: 使用rspack重构，比webpack快10x以上
----

package/docs/install.md

@@ -1 +0,0 @@
-<!-- @include: ../README.md -->

package/docs/mode.md

@@ -1,42 +0,0 @@
-# 模式
-
-目前有三种模式：教育主工程模式，教育子工程模式，独立模式
-
-## 教育子工程模式
-
-默认情况下使用**教育子工程模式**，无需配置
-
-## 教育主工程模式
-
-### 启用
-
-package.json 增加 mode 字段
-
-```json
-{
-  "edu": { "mode": "main" }
-}
-```
-
-## 独立项目模式
-
-### 启用
-
-package.json 增加 mode 字段
-
-```json
-{
-  "edu": { "mode": "single" }
-}
-```
-
-## 共同
-
-请查看[特性](feat.md)
-
-## 差异
-
-| 差异点                 | 子工程                                   | 主工程                                        | 独立                                                                                    |
-| ---------------------- | ---------------------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------- |
-| 打包 build             | 不复制 `public`，不导出 `html` 文件      | 复制 `public/static` 文件夹，导出 `html` 文件 | 复制 `public` 文件夹，导出 `html` 文件，且输出的 `output.filename` 会添加 `contenthash` |
-| [部署 deploy](deploy.md) | 只上传 `dist/js、dist/images` 两个文件夹 | 上传 `dist`                                   | 同主工程                                                                                |

package/docs/override.md

@@ -1,193 +0,0 @@
-# 自定义配置
-
-使用 `npx edu g override` 自动生成配置文件，修改 `webpack` 配置
-
-## 类型
-
-```ts
-export type Config = {
-  webpack?: (config: Configuration) => Configuration | undefined
-  devServer?: (config: DevServerConfiguration) => DevServerConfiguration | undefined
-  babel?: (config: any, type: 'src' | 'node_modules') => any | undefined
-  /**
-   * webpack alias 配置，会与内置 alias 合并
-   *
-   * @default
-   * { '@': 'src' }
-   */
-  alias?: Record<string, string>
-  /**
-   * webpack externals 配置，会与内置 externals 合并
-   */
-  externals?: Record<string, string>
-  /**
-   * terser pure_funcs 配置，传 [] 可以不清空 console.log
-   * @default ['console.log']
-   */
-  pure_funcs?: string[]
-  /**
-   * 编译 node_modules 下文件
-   *
-   * 仅在 development 环境下生效。production 一定会编译 node_modules
-   * @default true
-   */
-  transformNodeModules?: boolean
-  /**
-   * 指定压缩工具，esbuild 比 terser 快 20-40 倍，实际压缩率差 10%左右
-   *
-   * @default 'esbuild'
-   */
-  minify?: boolean | 'terser' | 'esbuild'
-  /** 自定义全局参数 */
-  define?: Record<string, any>
-  /** webpack-dev-server proxy
-   *
-   * @default /api -> /qsxxwapdev/api
-   */
-  proxy?: ProxyConfigArray
-  extraPostCSSPlugins?: any[]
-  /**
-   * 开启 mock 功能，会自动加载 mock 文件夹下的文件
-   *
-   * 默认情况下自动判断根目录是否存在 mock 文件夹，如果存在则开启 mock 功能。
-   * 如果设置 false，会关闭 mock 功能
-   */
-  mock?: boolean
-}
-```
-
-## 经典用例
-
-### 增加 alias
-
-```js
-const { defineConfig } = require('@qse/edu-scripts')
-const path = require('path')
-
-module.exports = defineConfig({
-  alias: {
-    config: path.resolve(__dirname, 'src/config'),
-  },
-})
-```
-
-### 保留 `console.log`
-
-```js
-const { defineConfig } = require('@qse/edu-scripts')
-
-module.exports = defineConfig({
-  pure_funcs: [],
-})
-```
-
-### 增加 proxy 代理
-
-```js
-const { defineConfig } = require('@qse/edu-scripts')
-
-module.exports = defineConfig({
-  proxy: [
-    {
-      context: ['/api/cadre_info'],
-      target: 'http://www.zhidianbao.cn:8088/qs_ymm/standard_api_work',
-      changeOrigin: true,
-      headers: {
-        origin: 'http://www.zhidianbao.cn',
-        host: 'www.zhidianbao.cn',
-      },
-    },
-  ],
-})
-```
-
-### 为 antd-mobile 增加 pxtorem 插件
-
-适用范围：antd-mobile@2, antd-mobile@5
-
-安装公司内专用的 pxtorem 插件，比原版增加了 include 与 CSS 变量 编译。并且修改默认值 `1rem === 10px`
-
-```bash
-npm i @qse/postcss-pxtorem
-```
-
-```js
-const { defineConfig } = require('@qse/edu-scripts')
-const pxtorem = require('@qse/postcss-pxtorem')
-
-module.exports = defineConfig({
-  extraPostCSSPlugins: [pxtorem({ include: ['antd-mobile'] })],
-})
-```
-
-> 可选：添加动态计算 html rem 值
-
-```html
-<script>
-  ;(function (designWidth, base, max) {
-    var docEl = document.documentElement
-    var metaEl = document.querySelector('meta[name="viewport"]')
-
-    var resize = function () {
-      var maxFontSize = Infinity
-      if (max) {
-        var scale = 1
-        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
-        var isMobile = /iphone|ipad|ipod|Windows Phone|android/i.test(navigator.userAgent)
-        if (match && isMobile) {
-          scale = parseFloat(match[1])
-        }
-        maxFontSize = max / scale
-      }
-
-      var clientWidth = docEl.clientWidth ? docEl.clientWidth : docEl.getBoundingClientRect().width
-
-      docEl.style.setProperty(
-        'font-size',
-        Math.min((clientWidth / designWidth) * base, maxFontSize) + 'px',
-        'important'
-      )
-    }
-    resize()
-    window.addEventListener('resize', resize)
-  })(375, 16, 16)
-</script>
-```
-
-### 为 antd-mobile@2 增加按需加载
-
-只能给 antd-mobile@2 使用。antd-mobile@5 自带 tree shake 不需要配置
-
-```js
-const { defineConfig } = require('@qse/edu-scripts')
-
-module.exports = defineConfig({
-  babel(config) {
-    config.plugins.push(['import', { libraryName: 'antd-mobile', style: true }, 'antd-mobile'])
-  },
-})
-```
-
-### 兼容 antd-mobile@1
-
-安装 `svg-sprite-loader` 模块，复制下面的代码
-
-```shell
-npm i svg-sprite-loader
-```
-
-```js
-const { defineConfig } = require('@qse/edu-scripts')
-module.exports = defineConfig({
-  webpack(config) {
-    config.module.rules[0].oneOf.unshift({
-      test: /\.svg$/,
-      loader: 'svg-sprite-loader',
-      options: {
-        esModule: false,
-        runtimeCompat: true,
-      },
-    })
-  },
-})
-```

package/docs/refactor-react-16.md

@@ -1,37 +0,0 @@
-# 升级 react16
-
-frame 项目 react15 升级 react16 指南
-
-## 事前准备
-
-准备适配 common3 的 frame 与 utils
-
-- pc: [pc-frame-utils.zip](http://www.zhidianbao.cn:8088/qsxxwapdev/edu-scripts/pc-frame-utils.zip)
-- h5: [h5-frame-utils.zip](http://www.zhidianbao.cn:8088/qsxxwapdev/edu-scripts/h5-frame-utils.zip)
-
-## 开始升级
-
-1. 先提交所有内容至svn，方便回退
-2. 解压下载的文件，将 frame 与 utils 放到对应目录
-3. 修改 html 文件中 frame 与 utils 的版本号，引入正确的资源
-4. 替换 CDN 资源 
-
-```html
-<script src="//static.qsepay.net/lib/react15.4.1_fastclick1.0.6_natty-storage2.0.2-fetch2.4.2_common2.js"></script>
-
-将上面这条 CDN 替换成下面这条
-
-<script src="//static.qsepay.net/lib/react16.14_fastclick1.0.6_natty-storage2.0.2-fetch2.4.2_axios0.21.1_common31.js"></script>
-```
-
-5. 运行项目看看效果
-
-## 错误处理
-
-### refast LogicRender 缺失
-
-删除全部的 `LogicRender`，使用*三元表达式*处理
-
-### prop-types 缺失
-
-react16 将 prop-types 独立了出去，请下载 prop-types 包，修改导入 

package/docs/refactor.md

@@ -1,67 +0,0 @@
-# 老项目接入流程
-
-## 事前约定
-
-`package.json` 中约定了 `name` 和 `version` 的含义
-
-```json
-{
-  "name": "项目名称，打包部署后都是这个名字",
-  "version": "版本号"
-}
-```
-
-## 重构
-
-运行 `npx @qse/edu-scripts auto-refactor` 自动重构项目，按终端提示进行操作
-
-运行完毕后接着按下面的步骤修改代码
-
-1. `index1.html` 增加 CDN
-
-```html
-<% if(process.env.NODE_ENV === 'development') { %>
-<script src="https://www.zhidianbao.cn:8443/qsxxwapdev/edu-scripts/react-dev-preset.js"></script>
-<script src="https://www.zhidianbao.cn:8443/qsxxwapdev/edu-scripts/moment2.29.1.js"></script>
-<script src="https://www.zhidianbao.cn:8443/qsxxwapdev/edu-scripts/antd3.26.20.js"></script>
-<script src="https://registry.npmmirror.com/@qse/antd/latest/files/dist/qsb-antd.min.js"></script>
-<script src="https://registry.npmmirror.com/@qse/scheme-render/latest/files/dist/qsb-scheme-render.min.js"></script>
-<% } else { %>
-<script src="//static.qsepay.net/lib/react16.14_fastclick1.0.6_natty-storage2.0.2-fetch2.4.2_axios0.21.1_common31.js"></script>
-<script src="//static.qsepay.net/lib/moment2.29.1.js"></script>
-<script src="//static.qsepay.net/lib/antd3.26.20.js"></script>
-
-<!-- 如果你是主工程，需要下面这两个文件 -->
-<script src="static/lib/qsb-antd.min.js"></script>
-<script src="static/lib/qsb-scheme-render.min.js"></script>
-<% } %>
-```
-
-如果你的钉钉容器打不开应用，可以添加动态的 `polyfill` 解决问题
-
-```html
-<!-- polyfill 官网 -->
-<script src="https://polyfill.io/v3/polyfill.min.js?features=default,es2015,es2016,es2017" crossorigin="anonymous"></script>
-
-<!-- 阿里云镜像 -->
-<script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=default,es2015,es2016,es2017" crossorigin="anonymous"></script>
-```
-
-2. `index1.html` 修改主文件
-
-```html
-<!-- 可选，动态主文件 -->
-<script src="<%= htmlWebpackPlugin.files.js %>"></script>
-
-<!-- 示例 -->
-<script src="js/utils_2.0.0.js"></script>
-<script src="<%= htmlWebpackPlugin.files.js %>"></script>
-<script src="js/frame/frame_2.10.0.js"></script>
-```
-
-3. 运行 `npm i` 安装依赖
-4. 运行项目 `npm run start` 参照下方排除错误
-
-## 报错处理
-
-请看[错误处理](faq.md)

package/docs/static.md

@@ -1,24 +0,0 @@
-# 静态资源
-
-## 开发环境使用的静态资源
-
-```html
-<script src="https://www.zhidianbao.cn:8443/qsxxwapdev/edu-scripts/react-dev-preset.js"></script>
-<script src="https://www.zhidianbao.cn:8443/qsxxwapdev/edu-scripts/moment2.29.1.js"></script>
-<script src="https://www.zhidianbao.cn:8443/qsxxwapdev/edu-scripts/antd3.26.20.js"></script>
-<script src="https://registry.npmmirror.com/@qse/antd/latest/files/dist/qsb-antd.min.js"></script>
-<script src="https://registry.npmmirror.com/@qse/scheme-render/latest/files/dist/qsb-scheme-render.min.js"></script>
-```
-
-## 生产环境使用的静态资源
-
-```html
-<!-- 包含 react react-dom natty-fetch common-utils dll(refast react-keeper) -->
-<script src="//static.qsepay.net/lib/react16.14_fastclick1.0.6_natty-storage2.0.2-fetch2.4.2_common31.js"></script>
-<!-- 额外包含 axios @0.21.1 -->
-<script src="//static.qsepay.net/lib/react16.14_fastclick1.0.6_natty-storage2.0.2-fetch2.4.2_axios0.21.1_common31.js"></script>
-
-<!-- 包含 moment 与 moment-locale-zh-cn -->
-<script src="//static.qsepay.net/lib/moment2.29.1.js"></script>
-<script src="//static.qsepay.net/lib/antd3.26.20.js"></script>
-```