@qse/edu-scripts 1.12.0

package/docs/override.md

@@ -0,0 +1,165 @@
+# 自定义配置
+
+使用 `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[]
+}
+```
+
+## 经典用例
+
+### 增加 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|andriod/i.test(navigator.userAgent)
+        if (match && isMobile) {
+          scale = parseFloat(match[1])
+        }
+        var maxFontSize = max / scale
+      }
+
+      docEl.style.fontSize =
+        Math.min((docEl.clientWidth / designWidth) * base, maxFontSize) + 'px'
+    }
+    resize()
+    window.addEventListener('resize', resize)
+  })(375, 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', libraryDirectory: 'es', style: true },
+      'antd-mobile',
+    ])
+  }
+})
+```

package/docs/refactor-react-16.md

@@ -0,0 +1,40 @@
+# 升级 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_common31.js"></script>
+<!-- 如果需要 axios 请使用这条 -->
+<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

@@ -0,0 +1,139 @@
+# 老项目接入流程
+
+## 事前约定
+
+`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="//www.zhidianbao.cn:8088/qsxxwapdev/edu-scripts/react-dev-preset.js"></script>
+<script src="//www.zhidianbao.cn:8088/qsxxwapdev/edu-scripts/moment2.29.1.js"></script>
+<script src="//www.zhidianbao.cn:8088/qsxxwapdev/edu-scripts/antd3.26.20.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>
+<% } %>
+```
+
+如果你的钉钉容器打不开应用，可以添加动态的 `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` 参照下方排除错误
+
+## 报错处理
+
+## moment 没有 external 掉
+
+全局搜索 `moment/locale/zh-cn`，把这些引入都删除掉即可
+
+## ueditor 提示 css 文件加载不到
+
+移动 `src/ueditor` 到 `public/ueditor`, 导入地址也修改下
+
+例子: `require('../../../public/ueditor/<something>')`
+
+### style 文件报错
+
+```js
+import * as style from './index.less'
+//=> 改成
+import style from './index.less'
+```
+
+### 如果判断是缺少 `alias` 配置，使用 `npx edu-scripts g override` 生成配置文件，并且配置 `alias` 参数
+
+```js
+const { defineConfig } = require('@qse/edu-scripts')
+const path = require('path')
+
+module.exports = defineConfig({
+  alias: {
+    pages: path.resolve('src/pages')
+  }
+})
+```
+
+### 动态导入 `import`，webpack4 以后 `import` 默认导出改成 `default`
+
+```js
+// 以前写法
+import('lodash/get').then(get=> {
+  get()
+})
+
+// 现在写法
+import('lodash/get').then(({default: get})=> {
+  get()
+})
+```
+
+### `react` 组件热更新失效
+
+把上面的 `CDN` 加入到首页(index\*.html)中
+
+其中 `process.env.NODE_ENV` 那段代码是关键
+
+热更新需要 react16，请阅读[升级指南](/refactor-react-16)
+
+### 主文件过大，代码分割失效
+
+检查是否有 `require('./chunkfile').default` 这种写法，这会导致代码分割失效，直接打进 main 中
+
+```js
+export default (callback) => {
+  require.ensure([], (require) => {
+    // 错误例子
+    callback(require('./chunkfile').default)
+
+    // 正确写法
+    const mod = require('./chunkfile')
+    callback(mod.default)
+  })
+}
+```
+
+另外，webpack2 开始就不推荐使用 `require.ensure` 做代码分割了。现在可以使用 `import` 方式代码分割
+
+```js
+export default (callback) => {
+  import(/* webpackChunkName: 'chunkfileName' */ './chunkfile').then((mod) => {
+    callback(mod.default)
+  })
+}
+```

package/jest.config.js

@@ -0,0 +1,195 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "/private/var/folders/3q/7klqgj0j63z08zcx0skwjm500000gn/T/jest_dx",
+
+  // Automatically clear mock calls, instances, contexts and results before every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  // collectCoverage: false,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: undefined,
+
+  // The directory where Jest should output its coverage files
+  // coverageDirectory: undefined,
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // Indicates which provider should be used to instrument code for coverage
+  // coverageProvider: "babel",
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // The default configuration for fake timers
+  // fakeTimers: {
+  //   "enableGlobally": false
+  // },
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "mjs",
+  //   "cjs",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "json",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  // moduleNameMapper: {},
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state before every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  // setupFilesAfterEnv: [],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  // testEnvironment: "jest-environment-node",
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  // testMatch: [
+  //   "**/__tests__/**/*.[jt]s?(x)",
+  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  // testPathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
+
+  // A map from regular expressions to paths to transformers
+  // transform: undefined,
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  // transformIgnorePatterns: [
+  //   "/node_modules/",
+  //   "\\.pnp\\.[^\\/]+$"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};