@qse/edu-scripts 1.15.0 → 2.0.1

package/src/start.ts

@@ -0,0 +1,52 @@
+import { rspack } from '@rspack/core'
+import { RspackDevServer } from '@rspack/dev-server'
+import getConfig from './utils/getConfig.js'
+import chalk from 'chalk'
+
+interface StartArgs {
+  port?: string
+}
+export default async function start(args: StartArgs) {
+  process.env.NODE_ENV = 'development'
+  process.env.BABEL_ENV = 'development'
+  process.env.BROWSERSLIST = 'chrome >= 70'
+  process.env.WEBPACK_DEV_SERVER_BASE_PORT = '3000'
+  process.env.BROWSERSLIST_IGNORE_OLD_DATA = 'true'
+
+  const basePort = process.env.WEBPACK_DEV_SERVER_BASE_PORT
+  // @ts-ignore
+  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 config = getConfig(args)
+  const compiler = rspack(config)
+  const middleware = rspack.lazyCompilationMiddleware(compiler)
+  const oldSetupMiddlewares = config.devServer!.setupMiddlewares
+  config.devServer!.setupMiddlewares = (middlewares: any, devServer: any) => {
+    if (oldSetupMiddlewares) {
+      middlewares = oldSetupMiddlewares(middlewares, devServer)
+    }
+    middlewares.unshift(middleware)
+    return middlewares
+  }
+  const devServer = new RspackDevServer(config.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.ts

@@ -0,0 +1,166 @@
+/**
+ * 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-extra'
+import path from 'path'
+import chalk from 'chalk'
+import filesize from 'filesize'
+// @ts-ignore
+import recursive from 'recursive-readdir'
+import stripAnsi from 'strip-ansi'
+import { gzipSizeSync } from 'gzip-size'
+import type { Stats } from '@rspack/core'
+
+interface SizeMap {
+  root: string
+  sizes: Record<string, number>
+}
+
+interface WebpackStats extends Stats {
+  stats?: Stats[]
+}
+
+function canReadAsset(asset: string): boolean {
+  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: WebpackStats,
+  previousSizeMap: SizeMap,
+  buildFolder: string,
+  maxBundleGzipSize: number,
+  maxChunkGzipSize: number
+): void {
+  const root = previousSizeMap.root
+  const sizes = previousSizeMap.sizes
+  const assets = (webpackStats.stats || [webpackStats])
+    .map((stats) =>
+      stats
+        .toJson({ all: false, assets: true })
+        .assets!.filter((asset) => canReadAsset(asset.name))
+        .map((asset) => {
+          const fileContents = fs.readFileSync(path.join(root, asset.name))
+          const size = gzipSizeSync(fileContents)
+          const previousSize = sizes[removeFileNameHash(root, asset.name)]
+          const 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
+  const mainAssetIdx = assets.findIndex((asset) => /_\d+\.\d+\.\d+/.test(asset.name))
+  assets.unshift(assets.splice(mainAssetIdx, 1)[0])
+
+  const longestSizeLabelLength = Math.max.apply(
+    null,
+    assets.map((a) => stripAnsi(a.sizeLabel).length)
+  )
+  let suggestBundleSplitting = false
+  assets.forEach((asset) => {
+    let sizeLabel = asset.sizeLabel
+    const sizeLength = stripAnsi(sizeLabel).length
+    if (sizeLength < longestSizeLabelLength) {
+      const rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength)
+      sizeLabel += rightPadding
+    }
+    const isMainBundle = /_\d+\.\d+\.\d+/.test(asset.name)
+    const maxRecommendedSize = isMainBundle ? maxBundleGzipSize : maxChunkGzipSize
+    const 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(
+        `产物大小明显大于推荐的大小 (主文件 ${filesize(maxBundleGzipSize)}, chunk ${filesize(maxChunkGzipSize)}, 黄色标注为偏大)`
+      )
+    )
+    console.log(chalk.yellow('考虑下使用代码分割解决'))
+    console.log(chalk.yellow('也可以使用 npm run analyze 命令分析产物'))
+  }
+
+  console.log()
+}
+
+function removeFileNameHash(buildFolder: string, fileName: string): string {
+  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: number, previousSize: number): string {
+  const FIFTY_KILOBYTES = 1024 * 50
+  const difference = currentSize - previousSize
+  const 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: string): Promise<SizeMap> {
+  return new Promise((resolve) => {
+    recursive(buildFolder, (err: any, fileNames: any) => {
+      let sizes: Record<string, number> | undefined
+      if (!err && fileNames) {
+        sizes = fileNames.filter(canReadAsset).reduce(
+          (memo: any, fileName: any) => {
+            const contents = fs.readFileSync(fileName)
+            const key = removeFileNameHash(buildFolder, fileName)
+            memo[key] = gzipSizeSync(contents)
+            return memo
+          },
+          {} as Record<string, number>
+        )
+      }
+      resolve({
+        root: buildFolder,
+        sizes: sizes || {},
+      })
+    })
+  })
+}
+
+export { measureFileSizesBeforeBuild, printFileSizesAfterBuild }

package/src/utils/{appConfig.js → appConfig.ts}

@@ -1,6 +1,7 @@
-const paths = require('../config/paths')
-const appPkg = require(paths.package)
-const fs = require('fs')
+import paths from '../config/paths'
+import fs from 'fs-extra'
+
+const appPkg = fs.readJsonSync(paths.package)
 
 const edu = appPkg.edu || {}
 
@@ -32,4 +33,4 @@ const appConfig = {
   },
 }
 
-module.exports = appConfig
+export default appConfig

package/src/utils/{beforeStart.js → beforeStart.ts}

@@ -1,10 +1,11 @@
-const fs = require('fs')
-const paths = require('../config/paths')
-const chalk = require('chalk')
-const pkg = require('../../package.json')
-const semver = require('semver')
-const appPkg = require(paths.package)
-const appConfig = require('./appConfig')
+import fs from 'fs-extra'
+import paths from '../config/paths'
+import chalk from 'chalk'
+import semver from 'semver'
+import appConfig from './appConfig'
+
+const pkg = fs.readJsonSync(paths.resolveOwn('package.json'))
+const appPkg = fs.readJsonSync(paths.package)
 
 if (semver.valid(appPkg.version) === null) {
   console.log(
@@ -50,3 +51,14 @@ if (appPkg.browserslist) {
   delete appPkg.browserslist
   fs.writeFileSync(paths.package, JSON.stringify(appPkg, null, 2), 'utf-8')
 }
+
+if (appPkg.eslintConfig) {
+  console.log(
+    chalk.yellow('package.json 中 eslintConfig 已废弃，请改用 @qse/eslint-config 进行配置')
+  )
+  console.log(chalk.yellow('npm i eslint @qse/eslint-config -D'))
+  console.log()
+  console.log(chalk.gray('新建 eslint.config.mjs 文件，内容如下：'))
+  console.log(chalk.yellow('import config from "@qse/eslint-config"'))
+  console.log(chalk.yellow('export default config'))
+}

package/src/utils/{changeDeployVersion.js → changeDeployVersion.ts}

@@ -1,28 +1,28 @@
-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')
+// @ts-nocheck
+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) {
+interface PackageInfo {
+  name: string
+  version: string
+  grayscale?: boolean
+}
+
+function changeDeployVersion(code: string, pkg: PackageInfo): string {
   const { name, version, grayscale } = pkg
   let ast
   try {
-    ast = parse(code)
-  } catch (error) {
-    throw new Error(`代码解析错误: ${error.message}`)
+    ast = parse(code, { filename: 'ver.js' })
+  } catch (error: any) {
+    throw new Error(`代码解析错误: ${error.message}`, { cause: error })
   }
   const keyName = grayscale ? 'grayscale' : 'main'
 
-  /**
-   * @return {babel.NodePath<t.VariableDeclarator> | undefined}
-   */
-  function findTargetDeclarator(ast) {
-    let res
+  function findTargetDeclarator(ast: any): any | undefined {
+    let res: any | undefined
 
     traverse(ast, {
       VariableDeclarator(path) {
@@ -38,18 +38,15 @@ function changeDeployVersion(code, pkg) {
     return res
   }
 
-  /**
-   * @param {babel.NodePath<t.VariableDeclarator>} path
-   * @return {babel.NodePath<t.ObjectExpression> | undefined}
-   */
-  function findModuleObject(path) {
-    let res
+  function findModuleObject(path: any): any | undefined {
+    let res: any | undefined
 
     path.traverse({
       ObjectExpression(path) {
         if (
           path.node.properties.some(
             (node) =>
+              t.isObjectProperty(node) &&
               t.isIdentifier(node.key, { name: MODULE_IDENTIFIER_NAME }) &&
               t.isLiteral(node.value, { value: name })
           )
@@ -62,15 +59,14 @@ function changeDeployVersion(code, pkg) {
     return res
   }
 
-  /**
-   * @param {babel.NodePath<t.ObjectExpression>} path
-   */
-  function modifyModuleVersion(path) {
+  function modifyModuleVersion(path: any): void {
     let hasModify = false
     path.traverse({
       Property(path) {
-        if (path.node.key.name === keyName) {
-          path.node.value.value = version
+        if (t.isObjectProperty(path.node) && t.isIdentifier(path.node.key, { name: keyName })) {
+          if (t.isStringLiteral(path.node.value)) {
+            path.node.value.value = version
+          }
           hasModify = true
         }
       },
@@ -80,10 +76,8 @@ function changeDeployVersion(code, pkg) {
       path.node.properties.push(t.objectProperty(t.identifier(keyName), t.stringLiteral(version)))
     }
   }
-  /**
-   * @param {babel.NodePath<t.ObjectExpression>} path
-   */
-  function deleteModuleComments(path) {
+
+  function deleteModuleComments(path: any): void {
     path.traverse({
       ObjectExpression(path) {
         delete path.node.leadingComments
@@ -91,19 +85,18 @@ function changeDeployVersion(code, pkg) {
     })
   }
 
-  /**
-   * @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)),
-      ])
-    )
+  function addModuleToTarget(path: any): void {
+    if (t.isArrayExpression(path.node.init)) {
+      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)
@@ -117,10 +110,12 @@ function changeDeployVersion(code, pkg) {
   }
   deleteModuleComments(targetPath)
 
-  return format(generate(ast, { minified: true }).code, {
-    parser: 'babel',
-    printWidth: 120,
-  })
+  const result = transformFromAstSync(ast, undefined, { filename: 'ver.js', minified: true })
+  if (!result || !result.code) {
+    throw new Error('代码转换失败')
+  }
+
+  return result.code
 }
 
-module.exports = changeDeployVersion
+export default changeDeployVersion

package/src/utils/defineConfig.ts

@@ -1,29 +1,17 @@
-import { Chalk } from 'chalk'
-import type { Compiler, Configuration } from 'webpack'
-import type { Configuration as DevServerConfiguration, ProxyConfigArray } from 'webpack-dev-server'
+import type { Chalk } from 'chalk'
+import type { Compiler, Configuration as RspackConfiguration, SwcLoaderOptions } from '@rspack/core'
+import type { Configuration as DevServerConfiguration } from '@rspack/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[])[]
-}
+type ProxyConfigArray = NonNullable<DevServerConfiguration['proxy']>
 
-export type Config = {
-  webpack?: (config: Configuration) => Configuration | undefined
+export type Configuration = {
+  webpack?: (config: RspackConfiguration) => RspackConfiguration | undefined
   devServer?: (config: DevServerConfiguration) => DevServerConfiguration | undefined
-  babel?: (config: BabelConfig, type: 'src' | 'node_modules') => any | undefined
   /**
    * webpack alias 配置，会与内置 alias 合并
    *
+   * 会自动读取 tsconfig 里 baseUrl + paths 的配置
+   *
    * @default
    * { '@': './src' }
    */
@@ -38,22 +26,10 @@ export type Config = {
    */
   pure_funcs?: string[]
   /**
-   * 编译 node_modules 下文件
-   *
-   * @default true
-   */
-  transformNodeModules?: boolean
-  /**
-   * 指定压缩工具，esbuild 比 terser 快 20-40 倍，实际压缩率差 10%左右
-   *
-   * @default 'esbuild'
-   */
-  minify?: boolean | 'terser' | 'esbuild'
-  /**
-   * 打包时压缩图片资源
+   * 是否压缩代码
    * @default true
    */
-  minifyImage?: boolean
+  minify?: boolean
   /** 自定义全局参数 */
   define?: Record<string, any>
   /**
@@ -75,7 +51,7 @@ export type Config = {
    */
   mock?: boolean
   /**
-   * 开发模式启动后只执行一次的函数，用来展示启动后的提示信息，或者自定义的逻辑
+   * 开发模式启动后用来展示启动后的提示信息，或者自定义的逻辑
    */
   startup?: (params: {
     /** 控制台输出内容 */
@@ -92,7 +68,14 @@ export type Config = {
    * @default false
    */
   decorators?: boolean
+  /**
+   * 与 babel-plugin-import 类似，但是内部是 rspack 重构，libraryDirectory 默认值是 lib
+   *
+   * @see https://rspack.rs/zh/guide/features/builtin-swc-loader#rspackexperimentsimport
+   * @default [{libraryName: 'lodash',libraryDirectory: '',camelToDashComponentName: false}]
+   */
+  import?: NonNullable<SwcLoaderOptions['rspackExperiments']>['import']
 }
-export function defineConfig(config: Config) {
+export function defineConfig(config: Configuration) {
   return config
 }

package/src/utils/esm-register.ts

@@ -0,0 +1,6 @@
+import { createRequire } from 'node:module'
+
+// 兼容 CommonJS 模块
+const require = createRequire(import.meta.url)
+const { register } = require('@swc-node/register/register')
+register()

package/src/utils/{exec.js → exec.ts}

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

package/src/utils/{getConfig.js → getConfig.ts}

@@ -1,8 +1,10 @@
-const getWebpackConfig = require('../config/webpackConfig')
-const getWebpackDevServerConfig = require('../config/webpackDevServerConfig')
-const getOverride = require('./getOverride')
+// @ts-ignore
+import getWebpackConfig from '../config/webpackConfig'
+// @ts-ignore
+import getWebpackDevServerConfig from '../config/webpackDevServerConfig'
+import getOverride from './getOverride'
 
-function getConfig(args) {
+function getConfig(args: any) {
   const override = getOverride()
 
   let webpackConfig = getWebpackConfig(args, override)
@@ -23,4 +25,4 @@ function getConfig(args) {
   return webpackConfig
 }
 
-module.exports = getConfig
+export default getConfig

package/src/utils/getOverride.ts

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

package/src/utils/resolveModule.ts

@@ -0,0 +1,3 @@
+export function resolveModule(mod: any) {
+  return mod.default ? mod.default : mod
+}

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "preserve",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "jsx": "react",
     "esModuleInterop": true,
@@ -11,22 +11,10 @@
     "strict": true,
     "paths": {
       "@/*": ["src/*"],
-      "@@/*": ["src/.umi/*"]
     },
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "declaration": true
   },
-  "exclude": [
-    "node_modules",
-    "lib",
-    "es",
-    "dist",
-    "typings",
-    "**/__test__",
-    "test",
-    "docs",
-    "tests",
-    "static"
-  ]
+  "include": ["src", "scripts"]
 }

package/tsdown.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'tsdown'
+
+export default defineConfig({
+  entry: ['src/index.ts', 'src/cli.js'],
+})

package/docs/changelog.md

@@ -1,5 +0,0 @@
----
-title: 更新日志
----
-
-<embed src="../CHANGELOG.md" />

package/docs/debug.md

@@ -1,17 +0,0 @@
-# 代码调试
-
-## 使用 `React Developer Tools` 调试
-
-1. 安装 `React Developer Tools` 插件
-2. 打开控制台(F12)
-3. 切换到 `Component` 标签页
-4. 选中需要查看的组件，可以看到 `state/props/hooks` 等信息
-
-## 使用 vscode 调试代码
-
-1. 打开 `JavaScript Debug Terminal` 终端，输入 `npm run start` 命令启动项目。
-
-![](https://p0.meituan.net/dpplatform/78a65449d74d1fbd61cc47e98c419a011041253.gif)
-
-2. 按住 `ctrl/command` 点击 `http://localhost:port` 打开链接
-3. 代码里打断点，网页点击触发断点