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

package/es/config/webpackConfig.js

@@ -6,8 +6,8 @@ import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 import ReactRefreshPlugin from "@rspack/plugin-react-refresh";
 import paths from "./paths.js";
 import appConfig from "../utils/appConfig.js";
-import { once } from "lodash-es";
 import { createRequire } from "node:module";
+import chalk from "chalk";
 var require2 = createRequire(import.meta.url);
 var appPkg = fs.readJsonSync(paths.package);
 var jsMainPath = appConfig.grayscale ? `${appPkg.name}/beta/${appPkg.name}` : `${appPkg.name}/${appPkg.name}`;
@@ -161,7 +161,7 @@ function getWebpackConfig(args, override) {
       },
       extensions: [".web.js", ".web.mjs", ".js", ".mjs", ".jsx", ".ts", ".tsx", ".json", ".wasm"]
     },
-    stats: isDev ? { preset: "errors-warnings", timings: true } : void 0,
+    stats: false,
     devtool: isDev ? "cheap-module-source-map" : false,
     module: {
       rules: [
@@ -181,8 +181,7 @@ function getWebpackConfig(args, override) {
                       import: [
                         {
                           libraryName: "lodash",
-                          libraryDirectory: "",
-                          camel2DashComponentName: false
+                          customName: "lodash/{{member}}"
                         },
                         ...override.import
                       ]
@@ -368,14 +367,18 @@ function getWebpackConfig(args, override) {
         })
       ) : [],
       process.env.ANALYZE && isProd && new BundleAnalyzerPlugin(),
-      isDev && !!override.startup && ((compiler) => {
-        compiler.hooks.afterDone.tap(
-          "edu-scripts-startup",
-          once(() => {
+      isDev && ((compiler) => {
+        let isFirst = true;
+        compiler.hooks.afterDone.tap("edu-scripts-startup", (stats) => {
+          if (!isFirst)
+            console.clear();
+          isFirst = false;
+          if (override.startup) {
             const logger = compiler.getInfrastructureLogger("edu-scripts");
-            override.startup({ logger, chalk: require2("chalk"), compiler });
-          })
-        );
+            override.startup({ logger, chalk, compiler });
+          }
+          console.log(stats.toString({ preset: "errors-warnings", timings: true, colors: true }));
+        });
       })
     ].filter(Boolean),
     optimization: {

package/es/start.js

@@ -16,6 +16,15 @@ async function start(args) {
   args.port = port;
   process.env.PORT = port;
   const compiler = rspack(getConfig(args));
+  const middleware = rspack.lazyCompilationMiddleware(compiler);
+  const oldSetupMiddlewares = compiler.options.devServer.setupMiddlewares;
+  compiler.options.devServer.setupMiddlewares = (middlewares, devServer2) => {
+    if (oldSetupMiddlewares) {
+      middlewares = oldSetupMiddlewares(middlewares, devServer2);
+    }
+    middlewares.unshift(middleware);
+    return middlewares;
+  };
   const devServer = new RspackDevServer(compiler.options.devServer, compiler);
   devServer.start();
   [("SIGINT", "SIGTERM")].forEach(function(sig) {

package/es/utils/defineConfig.d.ts

@@ -4,9 +4,9 @@ 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);
+    libraryDirectory?: string;
+    customName?: string;
+    style?: boolean | 'css' | string;
 };
 export type Config = {
     webpack?: (config: Configuration) => Configuration | undefined;
@@ -53,7 +53,7 @@ export type Config = {
      */
     mock?: boolean;
     /**
-     * 开发模式启动后只执行一次的函数，用来展示启动后的提示信息，或者自定义的逻辑
+     * 开发模式启动后用来展示启动后的提示信息，或者自定义的逻辑
      */
     startup?: (params: {
         /** 控制台输出内容 */
@@ -69,7 +69,14 @@ export type Config = {
      * @default false
      */
     decorators?: boolean;
-    /** babel-plugin-import */
+    /**
+     * 与 babel-plugin-import 类似，但是内部是 rspack 重构，libraryDirectory 默认值是 lib
+     *
+     * 如果 libraryDirectory 传 ’‘ 则必须使用 customName 来写
+     *
+     * @see https://rspack.rs/zh/guide/features/builtin-swc-loader#rspackexperimentsimport
+     * @default [{libraryName: 'lodash', customName: 'lodash/{{member}}'}]
+     */
     import?: BabelImportPlugin[];
 };
 export declare function defineConfig(config: Config): Config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qse/edu-scripts",
-  "version": "0.0.0-beta.0",
+  "version": "0.0.0-beta.2",
   "author": "Kinoko",
   "license": "MIT",
   "type": "module",
@@ -86,6 +86,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^30.0.0",
     "@types/yargs": "^17.0.35",
+    "eslint": "^9.39.3",
     "eslint-config-qsb-react": "^2.0.4",
     "father": "^4.5.2",
     "jest": "^30.2.0",

package/src/config/plugins/mock-server/index.js

@@ -125,8 +125,8 @@ function mockMiddlewave(req, res, next) {
 }
 
 /**
- * @param {import('webpack-dev-server').Middleware[]} middelwaves
- * @param {import('webpack-dev-server')} devServer
+ * @param {Parameters<import('@rspack/dev-server').Configuration['setupMiddlewares']>[0]} middelwaves
+ * @param {Parameters<import('@rspack/dev-server').Configuration['setupMiddlewares']>[1]} devServer
  */
 function setupMockServer(middelwaves, devServer) {
   if (!fs.existsSync(paths.mock)) return

package/src/config/webpackConfig.js

@@ -5,8 +5,8 @@ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
 import ReactRefreshPlugin from '@rspack/plugin-react-refresh'
 import paths from './paths.js'
 import appConfig from '../utils/appConfig.js'
-import { once } from 'lodash-es'
 import { createRequire } from 'node:module'
+import chalk from 'chalk'
 
 const require = createRequire(import.meta.url)
 const appPkg = fs.readJsonSync(paths.package)
@@ -185,7 +185,7 @@ export default function getWebpackConfig(args, override) {
       },
       extensions: ['.web.js', '.web.mjs', '.js', '.mjs', '.jsx', '.ts', '.tsx', '.json', '.wasm'],
     },
-    stats: isDev ? { preset: 'errors-warnings', timings: true } : undefined,
+    stats: false,
     devtool: isDev ? 'cheap-module-source-map' : false,
     module: {
       rules: [
@@ -205,8 +205,7 @@ export default function getWebpackConfig(args, override) {
                       import: [
                         {
                           libraryName: 'lodash',
-                          libraryDirectory: '',
-                          camel2DashComponentName: false,
+                          customName: 'lodash/{{member}}',
                         },
                         ...override.import,
                       ],
@@ -395,15 +394,18 @@ export default function getWebpackConfig(args, override) {
         : []),
       process.env.ANALYZE && isProd && new BundleAnalyzerPlugin(),
       isDev &&
-        !!override.startup &&
         ((compiler) => {
-          compiler.hooks.afterDone.tap(
-            'edu-scripts-startup',
-            once(() => {
+          let isFirst = true
+          compiler.hooks.afterDone.tap('edu-scripts-startup', (stats) => {
+            if (!isFirst) console.clear()
+            isFirst = false
+
+            if (override.startup) {
               const logger = compiler.getInfrastructureLogger('edu-scripts')
-              override.startup({ logger, chalk: require('chalk'), compiler })
-            })
-          )
+              override.startup({ logger, chalk, compiler })
+            }
+            console.log(stats.toString({ preset: 'errors-warnings', timings: true, colors: true }))
+          })
         }),
     ].filter(Boolean),
     optimization: {

package/src/start.js

@@ -18,6 +18,15 @@ export default async function start(args) {
   process.env.PORT = port
 
   const compiler = rspack(getConfig(args))
+  const middleware = rspack.lazyCompilationMiddleware(compiler)
+  const oldSetupMiddlewares = compiler.options.devServer.setupMiddlewares
+  compiler.options.devServer.setupMiddlewares = (middlewares, devServer) => {
+    if (oldSetupMiddlewares) {
+      middlewares = oldSetupMiddlewares(middlewares, devServer)
+    }
+    middlewares.unshift(middleware)
+    return middlewares
+  }
   const devServer = new RspackDevServer(compiler.options.devServer, compiler)
   devServer.start()
   ;[('SIGINT', 'SIGTERM')].forEach(function (sig) {

package/src/utils/defineConfig.ts

@@ -6,9 +6,9 @@ type ProxyConfigArray = NonNullable<DevServerConfiguration['proxy']>
 
 export type BabelImportPlugin = {
   libraryName: string
-  libraryDirectory: string
-  camel2DashComponentName?: boolean
-  style?: boolean | 'css' | ((name: string) => string)
+  libraryDirectory?: string
+  customName?: string
+  style?: boolean | 'css' | string
 }
 
 export type Config = {
@@ -56,7 +56,7 @@ export type Config = {
    */
   mock?: boolean
   /**
-   * 开发模式启动后只执行一次的函数，用来展示启动后的提示信息，或者自定义的逻辑
+   * 开发模式启动后用来展示启动后的提示信息，或者自定义的逻辑
    */
   startup?: (params: {
     /** 控制台输出内容 */
@@ -73,7 +73,14 @@ export type Config = {
    * @default false
    */
   decorators?: boolean
-  /** babel-plugin-import */
+  /**
+   * 与 babel-plugin-import 类似，但是内部是 rspack 重构，libraryDirectory 默认值是 lib
+   *
+   * 如果 libraryDirectory 传 ’‘ 则必须使用 customName 来写
+   *
+   * @see https://rspack.rs/zh/guide/features/builtin-swc-loader#rspackexperimentsimport
+   * @default [{libraryName: 'lodash', customName: 'lodash/{{member}}'}]
+   */
   import?: BabelImportPlugin[]
 }
 export function defineConfig(config: Config) {