@qse/edu-scripts 0.0.0-beta.0

package/src/generator.js

@@ -0,0 +1,67 @@
+import path from 'path'
+import fs from 'fs-extra'
+import paths from './config/paths.js'
+import chalk from 'chalk'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+/**
+ * @param {string[]} args
+ * @returns {string}
+ */
+const getTmpPath = (...args) => path.resolve(__dirname, 'asset', 'template', ...args)
+
+async function generatorOverride() {
+  if (fs.existsSync(paths.override)) {
+    console.log(chalk.red(`文件已存在 ${paths.override}`))
+    process.exit(0)
+  }
+
+  fs.copySync(getTmpPath('edu-scripts.override.js.tpl'), paths.override)
+
+  console.log(chalk.green(`成功生成 ${paths.override}`))
+}
+
+async function generatorTsconfig() {
+  if (fs.existsSync(paths.tsconfig)) {
+    console.log(chalk.red(`文件已存在 ${paths.tsconfig}`))
+    process.exit(0)
+  }
+
+  fs.copySync(getTmpPath('tsconfig.json.tpl'), paths.tsconfig)
+  fs.copySync(getTmpPath('edu-app-env.d.ts.tpl'), paths.eduAppEnv)
+
+  console.log(chalk.green(`成功生成 ${paths.tsconfig}`))
+}
+
+async function generatorTailwind() {
+  if (fs.existsSync(paths.tailwind)) {
+    console.log(chalk.red(`文件已存在 ${paths.tailwind}`))
+    process.exit(0)
+  }
+
+  fs.copySync(getTmpPath('tailwind.config.js.tpl'), paths.tailwind)
+
+  const code = ['@tailwind base;', '@tailwind components;', '@tailwind utilities;'].join('\n')
+
+  const globalLessFile = paths.resolveApp('src', 'index.less')
+  if (fs.existsSync(globalLessFile)) {
+    const content = fs.readFileSync(globalLessFile, 'utf-8')
+    if (!content.includes('@tailwind base')) {
+      fs.writeFileSync(globalLessFile, [code, content].join('\n'))
+    }
+
+    console.log(chalk.green(`成功生成 ${paths.tailwind}`))
+
+    return
+  }
+
+  console.log(
+    chalk.green(
+      [`成功生成 ${paths.tailwind}`, '', '添加以下代码到入口处的 index.less 中', code].join('\n')
+    )
+  )
+}
+
+export { generatorOverride as override, generatorTsconfig as ts, generatorTailwind as tailwind }

package/src/index.ts

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

package/src/start.js

@@ -0,0 +1,37 @@
+import { rspack } from '@rspack/core'
+import { RspackDevServer } from '@rspack/dev-server'
+import getConfig from './utils/getConfig.js'
+import chalk from 'chalk'
+
+export default async function start(args) {
+  process.env.NODE_ENV = 'development'
+  process.env.BABEL_ENV = 'development'
+  process.env.BROWSERSLIST = 'chrome >= 70'
+  process.env.WEBPACK_DEV_SERVER_BASE_PORT = '3000'
+
+  const basePort = process.env.WEBPACK_DEV_SERVER_BASE_PORT
+  const port = await RspackDevServer.getFreePort(args.port || process.env.PORT)
+  if (!(args.port || process.env.PORT) && +port !== +basePort) {
+    console.log(chalk.bgYellow(`${basePort} 端口已被占用，现切换到 ${port} 端口运行`))
+  }
+  args.port = port
+  process.env.PORT = port
+
+  const compiler = rspack(getConfig(args))
+  const devServer = new RspackDevServer(compiler.options.devServer, compiler)
+  devServer.start()
+  ;[('SIGINT', 'SIGTERM')].forEach(function (sig) {
+    process.on(sig, function () {
+      devServer.stop()
+      process.exit()
+    })
+  })
+
+  if (process.env.CI !== 'true') {
+    // Gracefully exit when stdin ends
+    process.stdin.on('end', function () {
+      devServer.stop()
+      process.exit()
+    })
+  }
+}

package/src/utils/FileSizeReporter.js

@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import fs from 'fs'
+import path from 'path'
+import chalk from 'chalk'
+import filesize from 'filesize'
+import recursive from 'recursive-readdir'
+import stripAnsi from 'strip-ansi'
+import { gzipSizeSync } from 'gzip-size'
+
+function canReadAsset(asset) {
+  return (
+    /\.(js|css)$/.test(asset) &&
+    !/service-worker\.js/.test(asset) &&
+    !/precache-manifest\.[0-9a-f]+\.js/.test(asset)
+  )
+}
+
+// Prints a detailed summary of build files.
+function printFileSizesAfterBuild(
+  webpackStats,
+  previousSizeMap,
+  buildFolder,
+  maxBundleGzipSize,
+  maxChunkGzipSize
+) {
+  var root = previousSizeMap.root
+  var sizes = previousSizeMap.sizes
+  var assets = (webpackStats.stats || [webpackStats])
+    .map((stats) =>
+      stats
+        .toJson({ all: false, assets: true })
+        .assets.filter((asset) => canReadAsset(asset.name))
+        .map((asset) => {
+          var fileContents = fs.readFileSync(path.join(root, asset.name))
+          var size = gzipSizeSync(fileContents)
+          var previousSize = sizes[removeFileNameHash(root, asset.name)]
+          var difference = getDifferenceLabel(size, previousSize)
+          return {
+            folder: path.join(path.basename(buildFolder), path.dirname(asset.name)),
+            name: path.basename(asset.name),
+            size: size,
+            sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''),
+          }
+        })
+    )
+    .reduce((single, all) => all.concat(single), [])
+
+  if (assets.length === 0) return
+
+  console.log('\ngzip 后文件大小:\n')
+
+  assets.sort((a, b) => b.size - a.size)
+
+  // move main file to first
+  var mainAssetIdx = assets.findIndex((asset) => /_\d+\.\d+\.\d+\./.test(asset.name))
+  assets.unshift(assets.splice(mainAssetIdx, 1)[0])
+
+  var longestSizeLabelLength = Math.max.apply(
+    null,
+    assets.map((a) => stripAnsi(a.sizeLabel).length)
+  )
+  var suggestBundleSplitting = false
+  assets.forEach((asset) => {
+    var sizeLabel = asset.sizeLabel
+    var sizeLength = stripAnsi(sizeLabel).length
+    if (sizeLength < longestSizeLabelLength) {
+      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength)
+      sizeLabel += rightPadding
+    }
+    var isMainBundle = /_\d+\.\d+\.\d+\./.test(asset.name)
+    var maxRecommendedSize = isMainBundle ? maxBundleGzipSize : maxChunkGzipSize
+    var isLarge = maxRecommendedSize && asset.size > maxRecommendedSize
+    if (isLarge && path.extname(asset.name) === '.js') {
+      suggestBundleSplitting = true
+    }
+    console.log(
+      '  ' +
+        (isLarge ? chalk.yellow(sizeLabel) : sizeLabel) +
+        '  ' +
+        chalk.dim(asset.folder + path.sep) +
+        chalk.cyan(asset.name)
+    )
+    if (isMainBundle) {
+      console.log('')
+    }
+  })
+  if (suggestBundleSplitting) {
+    console.log()
+    console.log(chalk.yellow('产物大小明显大于推荐的大小 (主文件 30k, chunk 1M, 黄色标注为偏大)'))
+    console.log(chalk.yellow('考虑下使用代码分割解决'))
+    console.log(chalk.yellow('也可以使用 npm run analyze 命令分析产物'))
+  }
+
+  console.log()
+}
+
+function removeFileNameHash(buildFolder, fileName) {
+  return fileName
+    .replace(buildFolder, '')
+    .replace(/\\/g, '/')
+    .replace(/\/\d+\.\d+\.\d+\//, '/')
+    .replace(/\/?(.*)(\.[0-9a-f]+)(\.chunk)?(\.js|\.css)/, (match, p1, p2, p3, p4) => p1 + p4)
+}
+
+// Input: 1024, 2048
+// Output: "(+1 KB)"
+function getDifferenceLabel(currentSize, previousSize) {
+  var FIFTY_KILOBYTES = 1024 * 50
+  var difference = currentSize - previousSize
+  var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0
+  if (difference >= FIFTY_KILOBYTES) {
+    return chalk.red('+' + fileSize)
+  } else if (difference < FIFTY_KILOBYTES && difference > 0) {
+    return chalk.yellow('+' + fileSize)
+  } else if (difference < 0) {
+    return chalk.green(fileSize)
+  } else {
+    return ''
+  }
+}
+
+function measureFileSizesBeforeBuild(buildFolder) {
+  return new Promise((resolve) => {
+    recursive(buildFolder, (err, fileNames) => {
+      var sizes
+      if (!err && fileNames) {
+        sizes = fileNames.filter(canReadAsset).reduce((memo, fileName) => {
+          var contents = fs.readFileSync(fileName)
+          var key = removeFileNameHash(buildFolder, fileName)
+          memo[key] = gzipSizeSync(contents)
+          return memo
+        }, {})
+      }
+      resolve({
+        root: buildFolder,
+        sizes: sizes || {},
+      })
+    })
+  })
+}
+
+export { measureFileSizesBeforeBuild, printFileSizesAfterBuild }

package/src/utils/appConfig.js

@@ -0,0 +1,36 @@
+import paths from '../config/paths.js'
+import fs from 'fs-extra'
+
+const appPkg = fs.readJsonSync(paths.package)
+
+const edu = appPkg.edu || {}
+
+if (edu.single || edu.mainProject) {
+  if (edu.single) {
+    edu.mode = 'single'
+    delete edu.single
+  }
+  if (edu.mainProject) {
+    edu.mode = 'main'
+    delete edu.mainProject
+  }
+  fs.writeFileSync(paths.package, JSON.stringify(appPkg, null, 2), 'utf-8')
+}
+
+const appConfig = {
+  /** @type {'main'|'single'} */
+  get mode() {
+    return edu.mode
+  },
+  get mainProject() {
+    return this.mode === 'main'
+  },
+  get single() {
+    return this.mode === 'single'
+  },
+  get grayscale() {
+    return !!edu.grayscale
+  },
+}
+
+export default appConfig

package/src/utils/beforeStart.js

@@ -0,0 +1,55 @@
+import fs from 'fs-extra'
+import paths from '../config/paths.js'
+import chalk from 'chalk'
+import semver from 'semver'
+import appConfig from './appConfig.js'
+import { fileURLToPath } from 'node:url'
+
+const pkg = fs.readJsonSync(fileURLToPath(import.meta.resolve('../../package.json')))
+
+const appPkg = fs.readJsonSync(paths.package)
+
+if (semver.valid(appPkg.version) === null) {
+  console.log(
+    chalk.red(`package.version 不符合 semver 规范 https://docs.npmjs.com/about-semantic-versioning`)
+  )
+  process.exit(1)
+}
+
+switch (appConfig.mode) {
+  case 'main':
+    console.log(chalk.bgMagenta('正在使用教育主工程模式'))
+    break
+  case 'single':
+    console.log(chalk.bgMagenta('正在使用独立项目模式'))
+    break
+  default:
+    console.log(chalk.bgMagenta('正在使用教育集成模式'))
+    break
+}
+
+if (appConfig.grayscale) {
+  console.log(chalk.bgYellow('正在使用灰度测试模式'))
+}
+
+if (!(appConfig.single || appConfig.mainProject)) {
+  if (fs.existsSync(paths.static)) {
+    console.log(chalk.bgYellow('教育集成工程不能含有 public/static, 现已自动删除'))
+    try {
+      fs.rmSync(paths.static, { recursive: true })
+    } catch (e) {}
+  }
+}
+
+if (!fs.existsSync(paths.public) && !process.argv.includes('auto-refactor')) {
+  console.log(chalk.red(`public 文件夹不存在，请先按文档改造项目`))
+  console.log(`文档: ${chalk.underline(pkg.homepage)}`)
+  console.log(`\n使用 ${chalk.green('npx edu-scripts auto-refactor')} 自动改造\n`)
+  process.exit(0)
+}
+
+if (appPkg.browserslist) {
+  console.log(chalk.yellow('已删除 package.json 中 browserslist，该值由内部自动控制\n'))
+  delete appPkg.browserslist
+  fs.writeFileSync(paths.package, JSON.stringify(appPkg, null, 2), 'utf-8')
+}

package/src/utils/changeDeployVersion.js

@@ -0,0 +1,119 @@
+import { parse, traverse, types as t, transformFromAstSync } from '@babel/core'
+
+// ver.js 中定义模块的数组
+const TARGET_IDENTIFIER_NAME = 'project_apiArr'
+const MODULE_IDENTIFIER_NAME = 'module'
+
+function changeDeployVersion(code, pkg) {
+  const { name, version, grayscale } = pkg
+  let ast
+  try {
+    ast = parse(code)
+  } catch (error) {
+    throw new Error(`代码解析错误: ${error.message}`)
+  }
+  const keyName = grayscale ? 'grayscale' : 'main'
+
+  /**
+   * @return {babel.NodePath<t.VariableDeclarator> | undefined}
+   */
+  function findTargetDeclarator(ast) {
+    let res
+
+    traverse(ast, {
+      VariableDeclarator(path) {
+        if (
+          t.isIdentifier(path.node.id, { name: TARGET_IDENTIFIER_NAME }) &&
+          t.isArrayExpression(path.node.init)
+        ) {
+          res = path
+        }
+      },
+    })
+
+    return res
+  }
+
+  /**
+   * @param {babel.NodePath<t.VariableDeclarator>} path
+   * @return {babel.NodePath<t.ObjectExpression> | undefined}
+   */
+  function findModuleObject(path) {
+    let res
+
+    path.traverse({
+      ObjectExpression(path) {
+        if (
+          path.node.properties.some(
+            (node) =>
+              t.isIdentifier(node.key, { name: MODULE_IDENTIFIER_NAME }) &&
+              t.isLiteral(node.value, { value: name })
+          )
+        ) {
+          res = path
+        }
+      },
+    })
+
+    return res
+  }
+
+  /**
+   * @param {babel.NodePath<t.ObjectExpression>} path
+   */
+  function modifyModuleVersion(path) {
+    let hasModify = false
+    path.traverse({
+      Property(path) {
+        if (path.node.key.name === keyName) {
+          path.node.value.value = version
+          hasModify = true
+        }
+      },
+    })
+
+    if (!hasModify) {
+      path.node.properties.push(t.objectProperty(t.identifier(keyName), t.stringLiteral(version)))
+    }
+  }
+  /**
+   * @param {babel.NodePath<t.ObjectExpression>} path
+   */
+  function deleteModuleComments(path) {
+    path.traverse({
+      ObjectExpression(path) {
+        delete path.node.leadingComments
+      },
+    })
+  }
+
+  /**
+   * @param {babel.NodePath<t.VariableDeclarator>} path
+   */
+  function addModuleToTarget(path) {
+    const elements = path.node.init.elements
+    elements.splice(
+      elements.length - 2,
+      0,
+      t.objectExpression([
+        t.objectProperty(t.identifier(MODULE_IDENTIFIER_NAME), t.stringLiteral(name)),
+        t.objectProperty(t.identifier(keyName), t.stringLiteral(version)),
+      ])
+    )
+  }
+
+  const targetPath = findTargetDeclarator(ast)
+  if (!targetPath) throw new Error(`ver.js 不合规范，未找到参数 ${TARGET_IDENTIFIER_NAME}`)
+
+  const moduleObjPath = findModuleObject(targetPath)
+  if (moduleObjPath) {
+    modifyModuleVersion(moduleObjPath)
+  } else {
+    addModuleToTarget(targetPath)
+  }
+  deleteModuleComments(targetPath)
+
+  return transformFromAstSync(ast, undefined, { minified: true }).code
+}
+
+export default changeDeployVersion

package/src/utils/defineConfig.ts

@@ -0,0 +1,81 @@
+import type { Chalk } from 'chalk'
+import type { Compiler, Configuration } from '@rspack/core'
+import type { Configuration as DevServerConfiguration } from '@rspack/dev-server'
+
+type ProxyConfigArray = NonNullable<DevServerConfiguration['proxy']>
+
+export type BabelImportPlugin = {
+  libraryName: string
+  libraryDirectory: string
+  camel2DashComponentName?: boolean
+  style?: boolean | 'css' | ((name: string) => string)
+}
+
+export type Config = {
+  webpack?: (config: Configuration) => Configuration | undefined
+  devServer?: (config: DevServerConfiguration) => DevServerConfiguration | undefined
+  /**
+   * webpack alias 配置，会与内置 alias 合并
+   *
+   * @default
+   * { '@': './src' }
+   */
+  alias?: Record<string, string>
+  /**
+   * webpack externals 配置，会与内置 externals 合并
+   */
+  externals?: Record<string, string>
+  /**
+   * terser pure_funcs，esbuild pure 配置，传 [] 可以不清空 console.log
+   * @default ['console.log']
+   */
+  pure_funcs?: string[]
+  /**
+   * 是否压缩代码
+   * @default true
+   */
+  minify?: boolean
+  /** 自定义全局参数 */
+  define?: Record<string, any>
+  /**
+   * context 填写的顺序很重要，前面的会优先匹配。可以重复定义 /api 来覆盖默认的配置
+   *
+   * proxy 会自动删除请求头 referer，避免某些后端校验失败的问题
+   * @see https://webpack.js.org/configuration/dev-server/#devserverproxy
+   * @default /api -> /qsxxwapdev/api
+   * @example { '/api': 'http://localhost:3000' }
+   * @example [{ context: ['/api'], target: 'http://localhost:3000' }]
+   */
+  proxy?: ProxyConfigArray | Record<string, string>
+  extraPostCSSPlugins?: any[]
+  /**
+   * 开启 mock 功能，会自动加载 mock 文件夹下的文件
+   *
+   * 默认情况下自动判断根目录是否存在 mock 文件夹，如果存在则开启 mock 功能。
+   * 如果设置 false，会关闭 mock 功能
+   */
+  mock?: boolean
+  /**
+   * 开发模式启动后只执行一次的函数，用来展示启动后的提示信息，或者自定义的逻辑
+   */
+  startup?: (params: {
+    /** 控制台输出内容 */
+    logger: ReturnType<Compiler['getInfrastructureLogger']>
+    /** 字体颜色相关工具 */
+    chalk: Chalk
+    /** webpack compiler 自定义的时候会用到 */
+    compiler: Compiler
+  }) => void
+
+  /**
+   * 是否开启装饰器语法支持 只支持 legacy 版本
+   * @see https://babeljs.io/docs/en/babel-plugin-proposal-decorators
+   * @default false
+   */
+  decorators?: boolean
+  /** babel-plugin-import */
+  import?: BabelImportPlugin[]
+}
+export function defineConfig(config: Config) {
+  return config
+}

package/src/utils/exec.js

@@ -0,0 +1,7 @@
+import cp from 'child_process'
+const exec = (cmd) => {
+  console.log(`> ${cmd}`)
+  return cp.execSync(cmd, { stdio: 'inherit', encoding: 'utf-8' })
+}
+
+export default exec

package/src/utils/getConfig.js

@@ -0,0 +1,26 @@
+import getWebpackConfig from '../config/webpackConfig.js'
+import getWebpackDevServerConfig from '../config/webpackDevServerConfig.js'
+import getOverride from './getOverride.js'
+
+function getConfig(args) {
+  const override = getOverride()
+
+  let webpackConfig = getWebpackConfig(args, override)
+
+  if (override.webpack) {
+    webpackConfig = override.webpack(webpackConfig) || webpackConfig
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    let devServerConfig = getWebpackDevServerConfig(args, override)
+
+    if (override.devServer) {
+      devServerConfig = override.devServer(devServerConfig) || devServerConfig
+    }
+    webpackConfig.devServer = devServerConfig
+  }
+
+  return webpackConfig
+}
+
+export default getConfig

package/src/utils/getOverride.js

@@ -0,0 +1,33 @@
+import fs from 'fs-extra'
+import paths from '../config/paths.js'
+import { createRequire } from 'node:module'
+const require = createRequire(import.meta.url)
+
+/** @type {import('./defineConfig').Config} */
+const defaultOverride = {
+  minify: true,
+  proxy: [],
+  extraPostCSSPlugins: [],
+  import: [],
+  pure_funcs: ['console.log'],
+}
+
+let override = null
+
+/**
+ * @return {import('./defineConfig').Config}
+ */
+export default function getOverride() {
+  if (override) return override
+
+  override = Object.assign({}, defaultOverride)
+
+  if (fs.existsSync(paths.override)) {
+    const userOverride = require(paths.override)
+    if (typeof userOverride !== 'object')
+      throw new Error('格式错误，请使用 npx edu g override 生成文件')
+    Object.assign(override, userOverride)
+  }
+
+  return override
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "node16",
+    "moduleResolution": "node16",
+    "importHelpers": true,
+    "jsx": "react",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"]
+    },
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "declaration": true
+  },
+  "include": ["src", "scripts"]
+}