@qse/edu-scripts 1.14.10 → 1.14.12

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+## 1.14.11 (2025-05-12)
+
+- feat: 优化热更新能力，适配 v1 环境
+
 ## 1.14.10 (2025-05-08)
 
 - feat: 部署增加文曲智阅（钉钉一方化）

package/lib/build.js

@@ -42,8 +42,6 @@ module.exports = async function build(args) {
       process.exit(1);
     }
     console.log(stats.toString({ colors: true, preset: "errors-warnings", timings: true }));
-    console.log();
-    console.log("gzip 后文件大小:\n");
     printFileSizesAfterBuild(
       stats,
       previousSizeMap,
@@ -51,7 +49,6 @@ module.exports = async function build(args) {
       WARN_AFTER_BUNDLE_GZIP_SIZE,
       WARN_AFTER_CHUNK_GZIP_SIZE
     );
-    console.log();
     if (appConfig.single) {
       console.log(`打包完成，可以使用 ${chalk.green("@qse/ssh-sftp")} 自动部署代码到 v1`);
     } else {

package/lib/config/babel.dependencies.js

@@ -1,3 +1,26 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
 // src/config/babel.dependencies.js
 var getOverride = require("../utils/getOverride");
 module.exports = function getBabelConfig(opts = {}) {
@@ -13,7 +36,7 @@ module.exports = function getBabelConfig(opts = {}) {
     inputSourceMap: isDev,
     presets: [
       [
-        "@babel/preset-env",
+        require.resolve("@babel/preset-env"),
         {
           modules: opts.modules,
           useBuiltIns: "entry",
@@ -25,7 +48,7 @@ module.exports = function getBabelConfig(opts = {}) {
     ].filter(Boolean),
     plugins: [
       [
-        "@babel/plugin-transform-runtime",
+        require.resolve("@babel/plugin-transform-runtime"),
         {
           corejs: false,
           helpers: true,
@@ -41,7 +64,7 @@ module.exports = function getBabelConfig(opts = {}) {
         }
       ],
       [
-        "import",
+        require.resolve("babel-plugin-import"),
         { libraryName: "lodash", libraryDirectory: "", camel2DashComponentName: false },
         "lodash"
       ]

package/lib/config/babel.js

@@ -46,7 +46,7 @@ module.exports = function getBabelConfig(opts = {}) {
     configFile: false,
     presets: [
       [
-        "@babel/preset-env",
+        require.resolve("@babel/preset-env"),
         {
           modules: opts.modules,
           useBuiltIns: "entry",
@@ -56,18 +56,18 @@ module.exports = function getBabelConfig(opts = {}) {
         }
       ],
       [
-        "@babel/preset-react",
+        require.resolve("@babel/preset-react"),
         {
           development: isDev,
           runtime: hasJsxRuntime ? "automatic" : "classic",
           useBuiltIns: !hasJsxRuntime
         }
       ],
-      isTypeScriptEnabled && "@babel/preset-typescript"
+      isTypeScriptEnabled && require.resolve("@babel/preset-typescript")
     ].filter(Boolean),
     plugins: [
       [
-        "@babel/plugin-transform-runtime",
+        require.resolve("@babel/plugin-transform-runtime"),
         {
           corejs: false,
           helpers: true,
@@ -82,16 +82,13 @@ module.exports = function getBabelConfig(opts = {}) {
           // useESModules: true,
         }
       ],
-      ["@babel/plugin-proposal-decorators", { legacy: true }],
-      ["@babel/plugin-transform-class-properties", { loose: true }],
-      ["@babel/plugin-transform-private-methods", { loose: true }],
-      ["@babel/plugin-transform-private-property-in-object", { loose: true }],
+      [require.resolve("@babel/plugin-proposal-decorators"), { version: "2023-11" }],
       [
-        "import",
+        require.resolve("babel-plugin-import"),
         { libraryName: "lodash", libraryDirectory: "", camel2DashComponentName: false },
         "lodash"
       ],
-      isDev && "react-refresh/babel",
+      isDev && require.resolve("react-refresh/babel"),
       addWebpackChunkName
     ].filter(Boolean)
   };

package/lib/config/plugins/ws-utils-createSocketURL.js

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/config/plugins/ws-utils-createSocketURL.js
+var ws_utils_createSocketURL_exports = {};
+__export(ws_utils_createSocketURL_exports, {
+  default: () => ws_utils_createSocketURL_default
+});
+module.exports = __toCommonJS(ws_utils_createSocketURL_exports);
+function format(objURL) {
+  var protocol = objURL.protocol || "";
+  if (protocol && protocol.substr(-1) !== ":") {
+    protocol += ":";
+  }
+  var auth = objURL.auth || "";
+  if (auth) {
+    auth = encodeURIComponent(auth);
+    auth = auth.replace(/%3A/i, ":");
+    auth += "@";
+  }
+  var host = "";
+  if (objURL.hostname) {
+    host = auth + (objURL.hostname.indexOf(":") === -1 ? objURL.hostname : "[".concat(objURL.hostname, "]"));
+    if (objURL.port) {
+      host += ":".concat(objURL.port);
+    }
+  }
+  var pathname = objURL.pathname || "";
+  if (objURL.slashes) {
+    host = "//".concat(host || "");
+    if (pathname && pathname.charAt(0) !== "/") {
+      pathname = "/".concat(pathname);
+    }
+  } else if (!host) {
+    host = "";
+  }
+  var search = objURL.search || "";
+  if (search && search.charAt(0) !== "?") {
+    search = "?".concat(search);
+  }
+  var hash = objURL.hash || "";
+  if (hash && hash.charAt(0) !== "#") {
+    hash = "#".concat(hash);
+  }
+  pathname = pathname.replace(
+    /[?#]/g,
+    /**
+     * @param {string} match
+     * @returns {string}
+     */
+    function(match) {
+      return encodeURIComponent(match);
+    }
+  );
+  search = search.replace("#", "%23");
+  return "".concat(protocol).concat(host).concat(pathname).concat(search).concat(hash);
+}
+function createSocketURL(parsedURL) {
+  var hostname = parsedURL.hostname;
+  var isInAddrAny = hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]";
+  if (isInAddrAny && self.location.hostname && self.location.protocol.indexOf("http") === 0) {
+    hostname = self.location.hostname;
+  }
+  var socketURLProtocol = parsedURL.protocol || self.location.protocol;
+  if (socketURLProtocol === "auto:" || hostname && isInAddrAny && self.location.protocol === "https:") {
+    socketURLProtocol = self.location.protocol;
+  }
+  socketURLProtocol = socketURLProtocol.replace(/^(?:http|.+-extension|file)/i, "ws");
+  var socketURLAuth = "";
+  if (parsedURL.username) {
+    socketURLAuth = parsedURL.username;
+    if (parsedURL.password) {
+      socketURLAuth = socketURLAuth.concat(":", parsedURL.password);
+    }
+  }
+  var socketURLHostname = (hostname || self.location.hostname || "localhost").replace(
+    /^\[(.*)\]$/,
+    "$1"
+  );
+  var socketURLPort = parsedURL.port;
+  if (!socketURLPort || socketURLPort === "0") {
+    socketURLPort = self.location.port;
+  }
+  var socketURLPathname = "/ws";
+  if (parsedURL.pathname && !parsedURL.fromCurrentScript) {
+    socketURLPathname = parsedURL.pathname;
+    if (hostname.indexOf("zhidianbao.cn") > -1 || hostname.indexOf("qsban.cn") > -1) {
+      var ctx = self.location.pathname.split("/")[1];
+      if (ctx) {
+        socketURLPathname = "/" + ctx + socketURLPathname;
+      }
+    }
+  }
+  return format({
+    protocol: socketURLProtocol,
+    auth: socketURLAuth,
+    hostname: socketURLHostname,
+    port: socketURLPort,
+    pathname: socketURLPathname,
+    slashes: true
+  });
+}
+var ws_utils_createSocketURL_default = createSocketURL;

package/lib/config/webpackConfig.js

@@ -1,3 +1,26 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
 // src/config/webpackConfig.js
 var fs = require("fs");
 var webpack = require("webpack");
@@ -10,7 +33,6 @@ var CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 var appPkg = require(paths.package);
 var appConfig = require("../utils/appConfig");
 var { ESBuildMinifyPlugin } = require("esbuild-loader");
-var ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
 var once = require("lodash/once");
 var jsMainPath = appConfig.grayscale ? `${appPkg.name}/beta/${appPkg.name}` : `${appPkg.name}/${appPkg.name}`;
 var assetPath = appConfig.grayscale ? `${appPkg.name}/beta/${appPkg.version}` : `${appPkg.name}/${appPkg.version}`;
@@ -40,18 +62,18 @@ module.exports = function getWebpackConfig(args, override) {
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
       {
-        loader: "style-loader",
+        loader: require.resolve("style-loader"),
         options: { attributes: { "data-module": appPkg.name, "data-version": appPkg.version } }
       },
       {
-        loader: "css-loader",
+        loader: require.resolve("css-loader"),
         options: cssOptions
       },
       {
         // Options for PostCSS as we reference these options twice
         // Adds vendor prefixing based on your specified browser support in
         // package.json
-        loader: "postcss-loader",
+        loader: require.resolve("postcss-loader"),
         options: {
           postcssOptions: {
             // Necessary for external CSS imports to work
@@ -60,10 +82,10 @@ module.exports = function getWebpackConfig(args, override) {
             config: false,
             plugins: [
               isProd && require("cssnano")({ preset: "default" }),
-              fs.existsSync(paths.tailwind) && "tailwindcss",
-              "postcss-flexbugs-fixes",
+              fs.existsSync(paths.tailwind) && require.resolve("tailwindcss"),
+              require.resolve("postcss-flexbugs-fixes"),
               [
-                "postcss-preset-env",
+                require.resolve("postcss-preset-env"),
                 {
                   autoprefixer: {
                     flexbox: "no-2009"
@@ -72,8 +94,8 @@ module.exports = function getWebpackConfig(args, override) {
                 }
               ],
               isProd && require("./plugins/postcss-safe-area")(),
-              isProd && ["postcss-momentum-scrolling", ["scroll", "auto"]],
-              "postcss-normalize",
+              isProd && [require.resolve("postcss-momentum-scrolling"), ["scroll", "auto"]],
+              require.resolve("postcss-normalize"),
               ...override.extraPostCSSPlugins
             ].filter(Boolean)
           },
@@ -83,7 +105,7 @@ module.exports = function getWebpackConfig(args, override) {
     ];
     if (preProcessor === "less-loader") {
       loaders.push({
-        loader: "less-loader",
+        loader: require.resolve("less-loader"),
         options: {
           lessOptions: {
             javascriptEnabled: true,
@@ -185,13 +207,13 @@ module.exports = function getWebpackConfig(args, override) {
             },
             {
               test: /\.(j|t)sx?$/,
-              loader: "babel-loader",
+              loader: require.resolve("babel-loader"),
               exclude: /node_modules/,
               options: require("./babel")()
             },
             override.transformNodeModules && {
               test: /\.m?js$/,
-              loader: "babel-loader",
+              loader: require.resolve("babel-loader"),
               exclude: /@babel(?:\/|\\{1,2})runtime/,
               options: require("./babel.dependencies")()
             },
@@ -276,7 +298,7 @@ module.exports = function getWebpackConfig(args, override) {
               test: /\.svg$/,
               use: [
                 {
-                  loader: "@svgr/webpack",
+                  loader: require.resolve("@svgr/webpack"),
                   options: {
                     prettier: false,
                     svgo: false,
@@ -288,7 +310,7 @@ module.exports = function getWebpackConfig(args, override) {
                   }
                 },
                 {
-                  loader: "url-loader",
+                  loader: require.resolve("url-loader"),
                   options: {
                     limit: imageInlineSizeLimit
                   }
@@ -318,6 +340,11 @@ module.exports = function getWebpackConfig(args, override) {
       qseCDN.isUseCommon && new webpack.DllReferencePlugin({
         manifest: require("../asset/dll/libcommon3-manifest.json")
       }),
+      new webpack.NormalModuleReplacementPlugin(/createSocketURL\.js$/, (resource) => {
+        if (resource.context.includes("webpack-dev-server")) {
+          resource.request = require.resolve("./plugins/ws-utils-createSocketURL");
+        }
+      }),
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/locale$/,
         contextRegExp: /moment$/
@@ -327,8 +354,6 @@ module.exports = function getWebpackConfig(args, override) {
         "process.env.APP_VERSION": JSON.stringify(appPkg.version),
         "process.env.BABEL_ENV": JSON.stringify(process.env.BABEL_ENV),
         "process.env.BROWSERSLIST": JSON.stringify(process.env.BROWSERSLIST),
-        "process.env.WDS_SOCKET_HOST": JSON.stringify(process.env.WDS_SOCKET_HOST),
-        "process.env.WDS_SOCKET_PORT": JSON.stringify(process.env.WDS_SOCKET_PORT),
         ...override.define
       }),
       new webpack.ProgressPlugin(),
@@ -367,17 +392,6 @@ module.exports = function getWebpackConfig(args, override) {
     optimization: {
       minimize: isProd && override.minify !== false,
       minimizer: [
-        override.minifyImage && new ImageMinimizerPlugin({
-          minimizer: {
-            implementation: ImageMinimizerPlugin.sharpMinify,
-            options: {
-              encodeOptions: {
-                // Your options for `sharp`
-                // https://sharp.pixelplumbing.com/api-output
-              }
-            }
-          }
-        }),
         override.minify === "esbuild" && new ESBuildMinifyPlugin({
           pure: override.pure_funcs ?? ["console.log"],
           drop: ["debugger"],

package/lib/config/webpackDevServerConfig.js

@@ -3,8 +3,6 @@ var WebpackDevServer = require("webpack-dev-server");
 var setupMockServer = require("./plugins/mock-server");
 module.exports = function getWebpackDevServerConfig(args, override) {
   const host = process.env.HOST || "0.0.0.0";
-  const sockHost = process.env.WDS_SOCKET_HOST;
-  const sockPort = process.env.WDS_SOCKET_PORT;
   const devServer = {
     hot: true,
     allowedHosts: "all",
@@ -13,7 +11,7 @@ module.exports = function getWebpackDevServerConfig(args, override) {
     open: args.open,
     host,
     client: {
-      webSocketURL: { protocol: "auto:", hostname: sockHost, port: sockPort },
+      webSocketURL: "auto://0.0.0.0:0/ws",
       overlay: {
         runtimeErrors: false,
         errors: true,

package/lib/start.js

@@ -10,14 +10,12 @@ var WebpackDevServer = require("webpack-dev-server");
 var webpack = require("webpack");
 var getConfig = require("./utils/getConfig");
 var 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;
   process.env.PORT = port;
   const compiler = webpack(getConfig(args));

package/lib/utils/FileSizeReporter.js

@@ -26,6 +26,9 @@ function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder, ma
       };
     })
   ).reduce((single, all) => all.concat(single), []);
+  if (assets.length === 0)
+    return;
+  console.log("\ngzip 后文件大小:\n");
   assets.sort((a, b) => b.size - a.size);
   var mainAssetIdx = assets.findIndex((asset) => /_\d+\.\d+\.\d+\./.test(asset.name));
   assets.unshift(assets.splice(mainAssetIdx, 1)[0]);
@@ -60,6 +63,7 @@ function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder, ma
     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);

package/lib/utils/getOverride.js

@@ -1,3 +1,26 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
 // src/utils/getOverride.js
 var fs = require("fs");
 var paths = require("../config/paths");
@@ -21,5 +44,18 @@ module.exports = function getOverride() {
   }
   if (override.minify === true)
     override.minify = defaultOverride.minify;
+  if (override.babel) {
+    const old = override.babel;
+    override.babel = (config, context) => {
+      const newConfig = old(config, context) || config;
+      let plugin = config.plugins.find(
+        (plugin2) => Array.isArray(plugin2) && /^(babel-plugin-)?import$/.test(plugin2[0])
+      );
+      if (plugin) {
+        plugin[0] = require.resolve("babel-plugin-import");
+      }
+      return newConfig;
+    };
+  }
   return override;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qse/edu-scripts",
-  "version": "1.14.10",
+  "version": "1.14.12",
   "author": "Kinoko",
   "license": "MIT",
   "description": "教育工程化基础框架",
@@ -45,6 +45,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.16",
     "@qse/ssh-sftp": "^1.0.1",
     "@svgr/webpack": "^8.1.0",
+    "@types/express": "^4.17.21",
     "babel-loader": "^9.2.1",
     "babel-plugin-import": "^1.13.8",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
@@ -61,7 +62,6 @@
     "globby": "^11.1.0",
     "gzip-size": "^6.0.0",
     "html-webpack-plugin": "^5.6.3",
-    "image-minimizer-webpack-plugin": "^3.8.3",
     "inquirer": "^8.2.6",
     "less": "^3.13.1",
     "less-loader": "^10.2.0",
@@ -81,7 +81,6 @@
     "recursive-readdir": "^2.2.3",
     "rimraf": "^3.0.2",
     "semver": "^7.7.1",
-    "sharp": "^0.32.6",
     "strip-ansi": "^6.0.1",
     "style-loader": "^3.3.4",
     "tailwindcss": "^3.4.17",

package/src/build.js

@@ -48,9 +48,7 @@ module.exports = async function build(args) {
     }
 
     console.log(stats.toString({ colors: true, preset: 'errors-warnings', timings: true }))
-    console.log()
 
-    console.log('gzip 后文件大小:\n')
     printFileSizesAfterBuild(
       stats,
       previousSizeMap,
@@ -58,7 +56,6 @@ module.exports = async function build(args) {
       WARN_AFTER_BUNDLE_GZIP_SIZE,
       WARN_AFTER_CHUNK_GZIP_SIZE
     )
-    console.log()
 
     if (appConfig.single) {
       console.log(`打包完成，可以使用 ${chalk.green('@qse/ssh-sftp')} 自动部署代码到 v1`)

package/src/config/babel.dependencies.js

@@ -21,7 +21,7 @@ module.exports = function getBabelConfig(opts = {}) {
     inputSourceMap: isDev,
     presets: [
       [
-        '@babel/preset-env',
+        require.resolve('@babel/preset-env'),
         {
           modules: opts.modules,
           useBuiltIns: 'entry',
@@ -33,7 +33,7 @@ module.exports = function getBabelConfig(opts = {}) {
     ].filter(Boolean),
     plugins: [
       [
-        '@babel/plugin-transform-runtime',
+        require.resolve('@babel/plugin-transform-runtime'),
         {
           corejs: false,
           helpers: true,
@@ -49,7 +49,7 @@ module.exports = function getBabelConfig(opts = {}) {
         },
       ],
       [
-        'import',
+        require.resolve('babel-plugin-import'),
         { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false },
         'lodash',
       ],

package/src/config/babel.js

@@ -31,7 +31,7 @@ module.exports = function getBabelConfig(opts = {}) {
     configFile: false,
     presets: [
       [
-        '@babel/preset-env',
+        require.resolve('@babel/preset-env'),
         {
           modules: opts.modules,
           useBuiltIns: 'entry',
@@ -41,18 +41,18 @@ module.exports = function getBabelConfig(opts = {}) {
         },
       ],
       [
-        '@babel/preset-react',
+        require.resolve('@babel/preset-react'),
         {
           development: isDev,
           runtime: hasJsxRuntime ? 'automatic' : 'classic',
           useBuiltIns: !hasJsxRuntime,
         },
       ],
-      isTypeScriptEnabled && '@babel/preset-typescript',
+      isTypeScriptEnabled && require.resolve('@babel/preset-typescript'),
     ].filter(Boolean),
     plugins: [
       [
-        '@babel/plugin-transform-runtime',
+        require.resolve('@babel/plugin-transform-runtime'),
         {
           corejs: false,
           helpers: true,
@@ -67,16 +67,13 @@ module.exports = function getBabelConfig(opts = {}) {
           // useESModules: true,
         },
       ],
-      ['@babel/plugin-proposal-decorators', { legacy: true }],
-      ['@babel/plugin-transform-class-properties', { loose: true }],
-      ['@babel/plugin-transform-private-methods', { loose: true }],
-      ['@babel/plugin-transform-private-property-in-object', { loose: true }],
+      [require.resolve('@babel/plugin-proposal-decorators'), { version: '2023-11' }],
       [
-        'import',
+        require.resolve('babel-plugin-import'),
         { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false },
         'lodash',
       ],
-      isDev && 'react-refresh/babel',
+      isDev && require.resolve('react-refresh/babel'),
       addWebpackChunkName,
     ].filter(Boolean),
   }

package/src/config/plugins/ws-utils-createSocketURL.js

@@ -0,0 +1,140 @@
+/* eslint-disable no-restricted-globals */
+
+/**
+ * @param {{ protocol?: string, auth?: string, hostname?: string, port?: string, pathname?: string, search?: string, hash?: string, slashes?: boolean }} objURL
+ * @returns {string}
+ */
+function format(objURL) {
+  var protocol = objURL.protocol || ''
+  if (protocol && protocol.substr(-1) !== ':') {
+    protocol += ':'
+  }
+  var auth = objURL.auth || ''
+  if (auth) {
+    auth = encodeURIComponent(auth)
+    auth = auth.replace(/%3A/i, ':')
+    auth += '@'
+  }
+  var host = ''
+  if (objURL.hostname) {
+    host =
+      auth +
+      (objURL.hostname.indexOf(':') === -1 ? objURL.hostname : '['.concat(objURL.hostname, ']'))
+    if (objURL.port) {
+      host += ':'.concat(objURL.port)
+    }
+  }
+  var pathname = objURL.pathname || ''
+  if (objURL.slashes) {
+    host = '//'.concat(host || '')
+    if (pathname && pathname.charAt(0) !== '/') {
+      pathname = '/'.concat(pathname)
+    }
+  } else if (!host) {
+    host = ''
+  }
+  var search = objURL.search || ''
+  if (search && search.charAt(0) !== '?') {
+    search = '?'.concat(search)
+  }
+  var hash = objURL.hash || ''
+  if (hash && hash.charAt(0) !== '#') {
+    hash = '#'.concat(hash)
+  }
+  pathname = pathname.replace(
+    /[?#]/g,
+    /**
+     * @param {string} match
+     * @returns {string}
+     */
+    function (match) {
+      return encodeURIComponent(match)
+    }
+  )
+  search = search.replace('#', '%23')
+  return ''.concat(protocol).concat(host).concat(pathname).concat(search).concat(hash)
+}
+
+/**
+ * @param {URL & { fromCurrentScript?: boolean }} parsedURL
+ * @returns {string}
+ */
+function createSocketURL(parsedURL) {
+  var hostname = parsedURL.hostname
+
+  // Node.js module parses it as `::`
+  // `new URL(urlString, [baseURLString])` parses it as '[::]'
+  var isInAddrAny = hostname === '0.0.0.0' || hostname === '::' || hostname === '[::]'
+
+  // why do we need this check?
+  // hostname n/a for file protocol (example, when using electron, ionic)
+  // see: https://github.com/webpack/webpack-dev-server/pull/384
+  if (isInAddrAny && self.location.hostname && self.location.protocol.indexOf('http') === 0) {
+    hostname = self.location.hostname
+  }
+  var socketURLProtocol = parsedURL.protocol || self.location.protocol
+
+  // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
+  if (
+    socketURLProtocol === 'auto:' ||
+    (hostname && isInAddrAny && self.location.protocol === 'https:')
+  ) {
+    socketURLProtocol = self.location.protocol
+  }
+  socketURLProtocol = socketURLProtocol.replace(/^(?:http|.+-extension|file)/i, 'ws')
+  var socketURLAuth = ''
+
+  // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
+  // Parse authentication credentials in case we need them
+  if (parsedURL.username) {
+    socketURLAuth = parsedURL.username
+
+    // Since HTTP basic authentication does not allow empty username,
+    // we only include password if the username is not empty.
+    if (parsedURL.password) {
+      // Result: <username>:<password>
+      socketURLAuth = socketURLAuth.concat(':', parsedURL.password)
+    }
+  }
+
+  // In case the host is a raw IPv6 address, it can be enclosed in
+  // the brackets as the brackets are needed in the final URL string.
+  // Need to remove those as url.format blindly adds its own set of brackets
+  // if the host string contains colons. That would lead to non-working
+  // double brackets (e.g. [[::]]) host
+  //
+  // All of these web socket url params are optionally passed in through resourceQuery,
+  // so we need to fall back to the default if they are not provided
+  var socketURLHostname = (hostname || self.location.hostname || 'localhost').replace(
+    /^\[(.*)\]$/,
+    '$1'
+  )
+  var socketURLPort = parsedURL.port
+  if (!socketURLPort || socketURLPort === '0') {
+    socketURLPort = self.location.port
+  }
+
+  // If path is provided it'll be passed in via the resourceQuery as a
+  // query param so it has to be parsed out of the querystring in order for the
+  // client to open the socket to the correct location.
+  var socketURLPathname = '/ws'
+  if (parsedURL.pathname && !parsedURL.fromCurrentScript) {
+    socketURLPathname = parsedURL.pathname
+
+    if (hostname.indexOf('zhidianbao.cn') > -1 || hostname.indexOf('qsban.cn') > -1) {
+      var ctx = self.location.pathname.split('/')[1]
+      if (ctx) {
+        socketURLPathname = '/' + ctx + socketURLPathname
+      }
+    }
+  }
+  return format({
+    protocol: socketURLProtocol,
+    auth: socketURLAuth,
+    hostname: socketURLHostname,
+    port: socketURLPort,
+    pathname: socketURLPathname,
+    slashes: true,
+  })
+}
+export default createSocketURL

package/src/config/webpackConfig.js

@@ -9,7 +9,6 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const appPkg = require(paths.package)
 const appConfig = require('../utils/appConfig')
 const { ESBuildMinifyPlugin } = require('esbuild-loader')
-const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 const once = require('lodash/once')
 
 const jsMainPath = appConfig.grayscale
@@ -56,18 +55,18 @@ module.exports = function getWebpackConfig(args, override) {
   const getStyleLoaders = (cssOptions, preProcessor) => {
     const loaders = [
       {
-        loader: 'style-loader',
+        loader: require.resolve('style-loader'),
         options: { attributes: { 'data-module': appPkg.name, 'data-version': appPkg.version } },
       },
       {
-        loader: 'css-loader',
+        loader: require.resolve('css-loader'),
         options: cssOptions,
       },
       {
         // Options for PostCSS as we reference these options twice
         // Adds vendor prefixing based on your specified browser support in
         // package.json
-        loader: 'postcss-loader',
+        loader: require.resolve('postcss-loader'),
         options: {
           postcssOptions: {
             // Necessary for external CSS imports to work
@@ -76,10 +75,10 @@ module.exports = function getWebpackConfig(args, override) {
             config: false,
             plugins: [
               isProd && require('cssnano')({ preset: 'default' }),
-              fs.existsSync(paths.tailwind) && 'tailwindcss',
-              'postcss-flexbugs-fixes',
+              fs.existsSync(paths.tailwind) && require.resolve('tailwindcss'),
+              require.resolve('postcss-flexbugs-fixes'),
               [
-                'postcss-preset-env',
+                require.resolve('postcss-preset-env'),
                 {
                   autoprefixer: {
                     flexbox: 'no-2009',
@@ -88,8 +87,8 @@ module.exports = function getWebpackConfig(args, override) {
                 },
               ],
               isProd && require('./plugins/postcss-safe-area')(),
-              isProd && ['postcss-momentum-scrolling', ['scroll', 'auto']],
-              'postcss-normalize',
+              isProd && [require.resolve('postcss-momentum-scrolling'), ['scroll', 'auto']],
+              require.resolve('postcss-normalize'),
               ...override.extraPostCSSPlugins,
             ].filter(Boolean),
           },
@@ -99,7 +98,7 @@ module.exports = function getWebpackConfig(args, override) {
     ]
     if (preProcessor === 'less-loader') {
       loaders.push({
-        loader: 'less-loader',
+        loader: require.resolve('less-loader'),
         options: {
           lessOptions: {
             javascriptEnabled: true,
@@ -208,13 +207,13 @@ module.exports = function getWebpackConfig(args, override) {
             },
             {
               test: /\.(j|t)sx?$/,
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               exclude: /node_modules/,
               options: require('./babel')(),
             },
             override.transformNodeModules && {
               test: /\.m?js$/,
-              loader: 'babel-loader',
+              loader: require.resolve('babel-loader'),
               exclude: /@babel(?:\/|\\{1,2})runtime/,
               options: require('./babel.dependencies')(),
             },
@@ -297,7 +296,7 @@ module.exports = function getWebpackConfig(args, override) {
               test: /\.svg$/,
               use: [
                 {
-                  loader: '@svgr/webpack',
+                  loader: require.resolve('@svgr/webpack'),
                   options: {
                     prettier: false,
                     svgo: false,
@@ -309,7 +308,7 @@ module.exports = function getWebpackConfig(args, override) {
                   },
                 },
                 {
-                  loader: 'url-loader',
+                  loader: require.resolve('url-loader'),
                   options: {
                     limit: imageInlineSizeLimit,
                   },
@@ -340,6 +339,11 @@ module.exports = function getWebpackConfig(args, override) {
         new webpack.DllReferencePlugin({
           manifest: require('../asset/dll/libcommon3-manifest.json'),
         }),
+      new webpack.NormalModuleReplacementPlugin(/createSocketURL\.js$/, (resource) => {
+        if (resource.context.includes('webpack-dev-server')) {
+          resource.request = require.resolve('./plugins/ws-utils-createSocketURL')
+        }
+      }),
       new webpack.IgnorePlugin({
         resourceRegExp: /^\.\/locale$/,
         contextRegExp: /moment$/,
@@ -349,8 +353,6 @@ module.exports = function getWebpackConfig(args, override) {
         'process.env.APP_VERSION': JSON.stringify(appPkg.version),
         'process.env.BABEL_ENV': JSON.stringify(process.env.BABEL_ENV),
         'process.env.BROWSERSLIST': JSON.stringify(process.env.BROWSERSLIST),
-        'process.env.WDS_SOCKET_HOST': JSON.stringify(process.env.WDS_SOCKET_HOST),
-        'process.env.WDS_SOCKET_PORT': JSON.stringify(process.env.WDS_SOCKET_PORT),
         ...override.define,
       }),
       new webpack.ProgressPlugin(),
@@ -394,18 +396,6 @@ module.exports = function getWebpackConfig(args, override) {
     optimization: {
       minimize: isProd && override.minify !== false,
       minimizer: [
-        override.minifyImage &&
-          new ImageMinimizerPlugin({
-            minimizer: {
-              implementation: ImageMinimizerPlugin.sharpMinify,
-              options: {
-                encodeOptions: {
-                  // Your options for `sharp`
-                  // https://sharp.pixelplumbing.com/api-output
-                },
-              },
-            },
-          }),
         override.minify === 'esbuild' &&
           new ESBuildMinifyPlugin({
             pure: override.pure_funcs ?? ['console.log'],

package/src/config/webpackDevServerConfig.js

@@ -7,8 +7,6 @@ const setupMockServer = require('./plugins/mock-server')
  */
 module.exports = function getWebpackDevServerConfig(args, override) {
   const host = process.env.HOST || '0.0.0.0'
-  const sockHost = process.env.WDS_SOCKET_HOST
-  const sockPort = process.env.WDS_SOCKET_PORT
 
   /** @type {WebpackDevServer.Configuration} */
   const devServer = {
@@ -19,7 +17,7 @@ module.exports = function getWebpackDevServerConfig(args, override) {
     open: args.open,
     host,
     client: {
-      webSocketURL: { protocol: 'auto:', hostname: sockHost, port: sockPort },
+      webSocketURL: 'auto://0.0.0.0:0/ws',
       overlay: {
         runtimeErrors: false,
         errors: true,

package/src/start.js

@@ -15,15 +15,12 @@ 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
   process.env.PORT = port
 

package/src/utils/FileSizeReporter.js

@@ -50,6 +50,11 @@ function printFileSizesAfterBuild(
         })
     )
     .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
@@ -91,6 +96,8 @@ function printFileSizesAfterBuild(
     console.log(chalk.yellow('考虑下使用代码分割解决'))
     console.log(chalk.yellow('也可以使用 npm run analyze 命令分析产物'))
   }
+
+  console.log()
 }
 
 function removeFileNameHash(buildFolder, fileName) {

package/src/utils/getOverride.js

@@ -29,5 +29,20 @@ module.exports = function getOverride() {
 
   if (override.minify === true) override.minify = defaultOverride.minify
 
+  if (override.babel) {
+    const old = override.babel
+    override.babel = (config, context) => {
+      const newConfig = old(config, context) || config
+
+      let plugin = config.plugins.find(
+        (plugin) => Array.isArray(plugin) && /^(babel-plugin-)?import$/.test(plugin[0])
+      )
+      if (plugin) {
+        plugin[0] = require.resolve('babel-plugin-import')
+      }
+      return newConfig
+    }
+  }
+
   return override
 }