feat: socket-server 根据 env.HOST 生成

packages/bundler-webpack/src/config/config.ts

@@ -57,6 +57,8 @@ export interface IOpts {
   };
   pkg?: Record<string, any>;
   disableCopy?: boolean;
+  host?: string;
+  port?: number;
 }
 
 export async function getConfig(opts: IOpts): Promise<Configuration> {
@@ -84,6 +86,8 @@ export async function getConfig(opts: IOpts): Promise<Configuration> {
     useHash,
     staticPathPrefix:
       opts.staticPathPrefix !== undefined ? opts.staticPathPrefix : 'static/',
+    port: opts.port,
+    host: opts.host,
   };
 
   // name

packages/bundler-webpack/src/config/definePlugin.test.ts

@@ -3,8 +3,10 @@ import { resolveDefine } from './definePlugin';
 test('normal', () => {
   expect(
     resolveDefine({
-      define: { foo: 'bar' },
-    }),
+      userConfig: {
+        define: { foo: 'bar' },
+      },
+    } as any),
   ).toEqual({
     foo: '"bar"',
     'process.env': {
@@ -19,8 +21,10 @@ test('env variables', () => {
   process.env.APP_FOO = 'BAR';
   expect(
     resolveDefine({
-      define: {},
-    }),
+      userConfig: {
+        define: {},
+      },
+    } as any),
   ).toEqual({
     'process.env': {
       NODE_ENV: '"test"',
@@ -29,3 +33,41 @@ test('env variables', () => {
     },
   });
 });
+
+test('should get SOCKET_SERVER if SOCKET_SERVER exists', () => {
+  process.env.SOCKET_SERVER = 'socket.server';
+  expect(
+    resolveDefine({
+      userConfig: {
+        define: {},
+      },
+      host: 'test.host',
+    } as any)['process.env']['SOCKET_SERVER'],
+  ).toEqual('"socket.server"');
+});
+
+test('should get SOCKET_SERVER if HOST exists', () => {
+  delete process.env.SOCKET_SERVER;
+  expect(
+    resolveDefine({
+      userConfig: {
+        define: {},
+      },
+      host: 'test.host',
+    } as any)['process.env']['SOCKET_SERVER'],
+  ).toEqual('"http://test.host:8000"');
+});
+
+test('should get https SOCKET_SERVER if exists', () => {
+  delete process.env.SOCKET_SERVER;
+  expect(
+    resolveDefine({
+      userConfig: {
+        define: {},
+        https: true,
+      },
+      host: 'test.host',
+      port: 6666,
+    } as any)['process.env']['SOCKET_SERVER'],
+  ).toEqual('"https://test.host:6666"');
+});

packages/bundler-webpack/src/config/definePlugin.ts

@@ -1,37 +1,66 @@
 import { DefinePlugin } from '@umijs/bundler-webpack/compiled/webpack';
 import Config from '@umijs/bundler-webpack/compiled/webpack-5-chain';
-import { Env, IConfig } from '../types';
+import type { Env, IConfig } from '../types';
 
 interface IOpts {
   config: Config;
   userConfig: IConfig;
   cwd: string;
   env: Env;
+  host?: string;
+  port?: number;
 }
 
 const prefixRE = /^UMI_APP_/;
 const ENV_SHOULD_PASS = ['NODE_ENV', 'HMR', 'SOCKET_SERVER', 'ERROR_OVERLAY'];
+const SOCKET_IGNORE_HOSTS = ['0.0.0.0', '127.0.0.1', 'localhost'];
+// 环境变量传递自定义逻辑，默认直接透传
+const CUSTOM_ENV_GETTER: Record<string, (opts: IOpts) => string | undefined> = {
+  SOCKET_SERVER: (opts: IOpts) => {
+    const { userConfig, host, port } = opts;
+    const socketServer = process.env.SOCKET_SERVER;
+    // 如果当前有 process.env.SOCKET_SERVER，则使用当前值
+    if (socketServer) {
+      return socketServer;
+    }
+    // 如果当前无 process.env.SOCKET_SERVER
+    // 则判断是否有 process.env.HOST 且不为 0.0.0.0/127.0.0.1/localhost
+    if (host && !SOCKET_IGNORE_HOSTS.includes(host)) {
+      const protocol = userConfig.https ? 'https:' : 'http:';
+      return `${protocol}//${host}:${port || 8000}`;
+    }
+    return;
+  },
+};
 
-export function resolveDefine(opts: { define: any; publicPath?: string }) {
+export function resolveDefine(opts: IOpts) {
+  const { userConfig } = opts;
   const env: Record<string, any> = {};
-  Object.keys(process.env).forEach((key) => {
-    if (prefixRE.test(key) || ENV_SHOULD_PASS.includes(key)) {
-      env[key] = process.env[key];
+  // 带 UMI_APP_ 前缀的和 ENV_SHOULD_PASS 定义的环境变量需要透传
+  ENV_SHOULD_PASS.concat(
+    Object.keys(process.env).filter((k) => prefixRE.test(k)),
+  ).forEach((key: string) => {
+    const envValue = CUSTOM_ENV_GETTER[key]
+      ? CUSTOM_ENV_GETTER[key](opts)
+      : process.env[key];
+    if (typeof envValue === 'undefined') {
+      return;
     }
+    env[key] = envValue;
   });
 
   // Useful for resolving the correct path to static assets in `public`.
   // For example, <img src={process.env.PUBLIC_PATH + '/img/logo.png'} />.
-  env.PUBLIC_PATH = opts.publicPath || '/';
+  env.PUBLIC_PATH = userConfig.publicPath || '/';
 
   for (const key in env) {
     env[key] = JSON.stringify(env[key]);
   }
 
   const define: Record<string, any> = {};
-  if (opts.define) {
-    for (const key in opts.define) {
-      define[key] = JSON.stringify(opts.define[key]);
+  if (userConfig.define) {
+    for (const key in userConfig.define) {
+      define[key] = JSON.stringify(userConfig.define[key]);
     }
   }
 
@@ -42,11 +71,6 @@ export function resolveDefine(opts: { define: any; publicPath?: string }) {
 }
 
 export async function addDefinePlugin(opts: IOpts) {
-  const { config, userConfig } = opts;
-  config.plugin('define').use(DefinePlugin, [
-    resolveDefine({
-      define: userConfig.define || {},
-      publicPath: userConfig.publicPath,
-    }),
-  ] as any);
+  const { config } = opts;
+  config.plugin('define').use(DefinePlugin, [resolveDefine(opts)] as any);
 }

packages/bundler-webpack/src/dev.ts

@@ -156,6 +156,8 @@ export async function setup(opts: IOpts) {
       : undefined,
     pkg: opts.pkg,
     disableCopy: opts.disableCopy,
+    port: opts.port,
+    host: opts.host,
   });
 
   const depConfig = await configModule.getConfig({
@@ -175,6 +177,8 @@ export async function setup(opts: IOpts) {
       cacheDirectory: join(cacheDirectoryPath, 'mfsu-deps'),
     },
     pkg: opts.pkg,
+    port: opts.port,
+    host: opts.host,
   });
 
   webpackConfig.resolve!.alias ||= {};