@qse/edu-scripts 1.12.0

package/src/generator.js

@@ -0,0 +1,138 @@
+const path = require('path')
+const fs = require('fs-extra')
+const { upperFirst, camelCase, has } = require('lodash')
+const paths = require('./config/paths')
+const chalk = require('chalk')
+
+/**
+ * @param {string[]} args
+ * @returns {string}
+ */
+const getTmpPath = (...args) => path.resolve(__dirname, 'asset', 'template', ...args)
+
+function genFile({ source, target, modulePath, replace }) {
+  let content = fs.readFileSync(source, 'utf-8')
+
+  if (typeof replace === 'object') {
+    Object.entries(replace).forEach(([searchValue, replaceValue]) => {
+      content = content.replaceAll(searchValue, replaceValue)
+    })
+  }
+
+  fs.writeFileSync(path.resolve(modulePath, target), content)
+}
+
+/**
+ * @typedef {Object} PageArgs
+ * @property {string} name
+ * @property {boolean} [fc=false]
+ * @property {boolean} [ts=true]
+ * @property {boolean} [route=true]
+ *
+ * @param {PageArgs} args
+ */
+async function generatorPage(args) {
+  const tmpPath = getTmpPath('page', 'index.[type].[ext].tpl')
+  const lessPath = tmpPath.replace('[type].[ext]', 'less')
+
+  const moduleName = camelCase(args.name)
+  const ModuleName = upperFirst(moduleName)
+  const type = args.fc ? 'fc' : 'class'
+  const ext = fs.existsSync(paths.tsconfig) ? (args.ts ? 'tsx' : 'js') : 'js'
+
+  const jsPath = tmpPath.replace('[type]', type).replace('[ext]', ext)
+  const routePath = tmpPath.replace('index.[type].[ext]', 'route.js')
+  const logicPath = tmpPath.replace('index.[type].[ext]', 'logic.js')
+
+  const modulePath = path.resolve(paths.pages, moduleName)
+
+  const ModuleFileName = args.route ? ModuleName : 'index'
+  const ModuleLogicName = args.route ? ModuleName + 'Logic' : 'logic'
+
+  const replace = { ModuleName, moduleName, ModuleFileName, ModuleLogicName }
+
+  fs.ensureDirSync(modulePath)
+  genFile({ source: jsPath, target: `${ModuleFileName}.${ext}`, modulePath, replace })
+  genFile({ source: lessPath, target: `${ModuleFileName}.less`, modulePath, replace })
+  if (type === 'class' && ext === 'js') {
+    genFile({
+      source: logicPath,
+      target: `${ModuleLogicName}.${ext.slice(0, 2)}`,
+      modulePath,
+      replace,
+    })
+  }
+  if (args.route) {
+    genFile({ source: routePath, target: `index.${ext.slice(0, 2)}`, modulePath, replace })
+  }
+
+  console.log(
+    chalk.green(
+      [
+        `生成完毕:`,
+        `import ${ModuleName} from '@/pages/${moduleName}'`,
+        `const ${ModuleName} = lazy(() => import(/* webpackChunkName: '${moduleName}' */ '@/pages/${moduleName}'))`,
+        `{ path: '/${moduleName}', element: <${ModuleName} /> },`,
+      ].join('\n')
+    )
+  )
+}
+
+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')
+    )
+  )
+}
+
+module.exports = {
+  page: generatorPage,
+  override: generatorOverride,
+  ts: generatorTsconfig,
+  tailwind: generatorTailwind,
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { defineConfig } from './utils/defineConfig'

package/src/start.js

@@ -0,0 +1,46 @@
+process.env.NODE_ENV = 'development'
+process.env.BABEL_ENV = 'development'
+process.env.BROWSERSLIST = 'chrome >= 70'
+process.env.WEBPACK_DEV_SERVER_BASE_PORT = '3000'
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', (err) => {
+  throw err
+})
+
+const WebpackDevServer = require('webpack-dev-server')
+const webpack = require('webpack')
+const getConfig = require('./utils/getConfig')
+const chalk = require('chalk')
+
+process.env.WDS_SOCKET_HOST = WebpackDevServer.internalIPSync('v4') || '127.0.0.1'
+
+module.exports = async function start(args) {
+  const basePort = process.env.WEBPACK_DEV_SERVER_BASE_PORT
+  const port = await WebpackDevServer.getFreePort(args.port || process.env.PORT)
+  if (!(args.port || process.env.PORT) && +port !== +basePort) {
+    console.log(chalk.bgYellow(`${basePort} 端口已被占用，现切换到 ${port} 端口运行`))
+  }
+  process.env.WDS_SOCKET_PORT = port
+  args.port = port
+
+  const compiler = webpack(getConfig(args))
+  const devServer = new WebpackDevServer(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,144 @@
+/**
+ * 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.
+ */
+
+var fs = require('fs')
+var path = require('path')
+var chalk = require('chalk')
+var filesize = require('filesize')
+var recursive = require('recursive-readdir')
+var stripAnsi = require('strip-ansi')
+var gzipSize = require('gzip-size').sync
+
+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 = gzipSize(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), [])
+  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 命令分析产物'))
+  }
+}
+
+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] = gzipSize(contents)
+          return memo
+        }, {})
+      }
+      resolve({
+        root: buildFolder,
+        sizes: sizes || {},
+      })
+    })
+  })
+}
+
+module.exports = {
+  measureFileSizesBeforeBuild: measureFileSizesBeforeBuild,
+  printFileSizesAfterBuild: printFileSizesAfterBuild,
+}

package/src/utils/appConfig.js

@@ -0,0 +1,35 @@
+const paths = require('../config/paths')
+const appPkg = require(paths.package)
+const fs = require('fs')
+
+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
+  },
+}
+
+module.exports = appConfig

package/src/utils/beforeStart.js

@@ -0,0 +1,66 @@
+const fs = require('fs')
+const paths = require('../config/paths')
+const chalk = require('chalk')
+const pkg = require('../../package.json')
+const updateNotifier = require('update-notifier')
+
+const notifier = updateNotifier({
+  pkg,
+  shouldNotifyInNpmScript: true,
+  updateCheckInterval: 1000 * 60, // 时刻保持更新
+})
+if (notifier.update && ['minor', 'major'].includes(notifier.update.type)) {
+  const message =
+    '发现新版本 ' +
+    chalk.dim('{currentVersion}') +
+    chalk.reset(' → ') +
+    chalk.green('{latestVersion}') +
+    ' \n运行 ' +
+    chalk.cyan('{updateCommand}') +
+    ' 进行更新\n\n' +
+    chalk.bold.red('请始终保持最新版本\n') +
+    '更新日志: ' +
+    chalk.green(`${pkg.homepage}#/changelog`)
+  notifier.notify({ message })
+  process.exit(1)
+}
+
+const appPkg = require(paths.package)
+const appConfig = require('./appConfig')
+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,115 @@
+const t = require('@babel/types')
+const { parse } = require('@babel/parser')
+const generate = require('@babel/generator').default
+const traverse = require('@babel/traverse').default
+const { format } = require('prettier')
+
+// 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.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)
+  }
+
+  return format(generate(ast, { minified: true }).code, {
+    parser: 'babel',
+    printWidth: 120,
+  })
+}
+
+module.exports = changeDeployVersion

package/src/utils/defineConfig.ts

@@ -0,0 +1,63 @@
+import type { Configuration } from 'webpack'
+import type { Configuration as DevServerConfiguration, ProxyConfigArray } from 'webpack-dev-server'
+
+export type BabelImportPlugin = [
+  'import',
+  {
+    libraryName: string
+    libraryDirectory: string
+    camel2DashComponentName?: boolean
+    style?: boolean | 'css' | ((name: string) => string)
+  },
+  string
+]
+export type BabelConfig = {
+  presets: any[]
+  plugins: (string | BabelImportPlugin | any[])[]
+}
+
+export type Config = {
+  webpack?: (config: Configuration) => Configuration | undefined
+  devServer?: (config: DevServerConfiguration) => DevServerConfiguration | undefined
+  babel?: (config: BabelConfig, 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，esbuild pure 配置，传 [] 可以不清空 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[]
+}
+export function defineConfig(config: Config) {
+  return config
+}

package/src/utils/exec.js

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

package/src/utils/getConfig.js

@@ -0,0 +1,26 @@
+const getWebpackConfig = require('../config/webpackConfig')
+const getWebpackDevServerConfig = require('../config/webpackDevServerConfig')
+const getOverride = require('./getOverride')
+
+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
+}
+
+module.exports = getConfig

package/src/utils/getOverride.js

@@ -0,0 +1,32 @@
+const fs = require('fs')
+const paths = require('../config/paths')
+
+/** @type {import('./defineConfig').Config} */
+const defaultOverride = {
+  transformNodeModules: true,
+  minify: 'esbuild',
+  proxy: [],
+  extraPostCSSPlugins: [],
+}
+
+let override = null
+
+/**
+ * @return {import('./defineConfig').Config}
+ */
+module.exports = 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)
+  }
+
+  if (override.minify === true) override.minify = defaultOverride.minify
+
+  return override
+}