feat: umi devServer support custom express middleware hooks (umijs#9685)

* feat: umi devServer support custom express middleware hooks * feat: devServe remove onAfterMiddleware Co-authored-by: chencheng (云谦) <[email protected]>
yanm1ng · Nov 3, 2022 · eb463a1 · eb463a1
1 parent 0e9783f
commit eb463a1
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 4 deletions.
diff --git a/docs/docs/api/plugin-api.md b/docs/docs/api/plugin-api.md
@@ -488,6 +488,17 @@ api.modifyWebpackConfig((memo, { webpack, env }) => {
 ### onBeforeCompiler
 generate 之后，webpack / vite compiler 之前。传入的 fn 不接收任何参数。
 
+### onBeforeMiddleware
+提供在服务器内部执行所有其他中间件之前执行自定义中间件的能力, 这可以用来定义自定义处理程序， 例如:
+
+```ts
+api.onBeforeMiddleware(({ app }) => {
+  app.get('/some/path', function (req, res) {
+    res.json({ custom: 'response' });
+  });
+});
+```
+
 ### onBuildComplete
 build 完成时。传入的 fn 接收 `{ isFirstCompile: boolean, stats, time: number, err?: Error }` 作为参数。
 

diff --git a/examples/boilerplate-vue/.umirc.ts b/examples/boilerplate-vue/.umirc.ts
@@ -8,7 +8,7 @@ export default {
   crossorigin: {},
   presets: [require.resolve('@umijs/preset-vue')],
   polyfill: false,
-  // vite: {},
+  vite: {},
   title: 'boilerplate - umi 4 & vue',
   scripts: [
     `/*alert(2);*/`,

diff --git a/examples/boilerplate-vue/plugin.ts b/examples/boilerplate-vue/plugin.ts
@@ -1,4 +1,4 @@
-import { IApi } from 'umi';
+import type { IApi } from 'umi';
 
 export default (api: IApi) => {
   api.modifyHTML(($) => {
@@ -27,4 +27,11 @@ export default (api: IApi) => {
     args;
     // console.log('> onCheckCode', args);
   });
+
+  api.onBeforeMiddleware(({ app }) => {
+    app.get('/some/path', function (req, res) {
+      res.json({ custom: 'response' });
+    });
+    console.log('> onBeforeMiddleware', typeof app);
+  });
 };
diff --git a/packages/bundler-vite/src/dev.ts b/packages/bundler-vite/src/dev.ts
@@ -16,6 +16,7 @@ interface IOpts {
   extraBabelPlugins?: IBabelPlugin[];
   extraBabelPresets?: IBabelPlugin[];
   modifyViteConfig?: Function;
+  onBeforeMiddleware?: Function;
 }
 
 export async function dev(opts: IOpts) {
@@ -44,5 +45,6 @@ export async function dev(opts: IOpts) {
     beforeMiddlewares: opts.beforeMiddlewares,
     afterMiddlewares: opts.afterMiddlewares,
     onDevCompileDone: opts.onDevCompileDone,
+    onBeforeMiddleware: opts.onBeforeMiddleware,
   });
 }
diff --git a/packages/bundler-vite/src/server/server.ts b/packages/bundler-vite/src/server/server.ts
@@ -38,6 +38,7 @@ interface IOpts {
     isFirstCompile: boolean;
     stats: HmrContext['modules'] | DepOptimizationMetadata;
   }) => Promise<void> | void;
+  onBeforeMiddleware?: Function;
 }
 
 export async function createServer(opts: IOpts) {
@@ -80,6 +81,10 @@ export async function createServer(opts: IOpts) {
   // before middlewares
   opts.beforeMiddlewares?.forEach((m) => app.use(m));
 
+  if (opts.onBeforeMiddleware) {
+    opts.onBeforeMiddleware(app);
+  }
+
   // proxy
   if (userConfig.proxy) {
     createProxy(userConfig.proxy, app);

diff --git a/packages/bundler-webpack/src/dev.ts b/packages/bundler-webpack/src/dev.ts
@@ -33,6 +33,7 @@ type IOpts = {
   mfsuInclude?: string[];
   srcCodeCache?: any;
   startBuildWorker?: (deps: any[]) => Worker;
+  onBeforeMiddleware?: Function;
 } & Pick<IConfigOpts, 'cache' | 'pkg'>;
 
 export function stripUndefined(obj: any) {
@@ -190,5 +191,6 @@ export async function dev(opts: IOpts) {
     afterMiddlewares: [...(opts.afterMiddlewares || [])],
     onDevCompileDone: opts.onDevCompileDone,
     onProgress: opts.onProgress,
+    onBeforeMiddleware: opts.onBeforeMiddleware,
   });
 }
diff --git a/packages/bundler-webpack/src/index.ts b/packages/bundler-webpack/src/index.ts
@@ -1,7 +1,10 @@
 import type webpack from '../compiled/webpack';
 import './requireHook';
 
-export type { RequestHandler } from '@umijs/bundler-utils/compiled/express';
+export type {
+  RequestHandler,
+  Express,
+} from '@umijs/bundler-utils/compiled/express';
 export type { Compiler, Stats } from '../compiled/webpack';
 export * from './build';
 export * from './config/config';

diff --git a/packages/bundler-webpack/src/server/server.ts b/packages/bundler-webpack/src/server/server.ts
@@ -23,6 +23,7 @@ interface IOpts {
   afterMiddlewares?: any[];
   onDevCompileDone?: Function;
   onProgress?: Function;
+  onBeforeMiddleware?: Function;
 }
 
 export async function createServer(opts: IOpts) {
@@ -65,6 +66,11 @@ export async function createServer(opts: IOpts) {
   // before middlewares
   (opts.beforeMiddlewares || []).forEach((m) => app.use(m));
 
+  // Provides the ability to execute custom middleware prior to all other middleware internally within the server.
+  if (opts.onBeforeMiddleware) {
+    opts.onBeforeMiddleware(app);
+  }
+
   // webpack dev middleware
   const configs = Array.isArray(webpackConfig)
     ? webpackConfig

diff --git a/packages/preset-umi/src/commands/dev/dev.ts b/packages/preset-umi/src/commands/dev/dev.ts
@@ -289,6 +289,7 @@ PORT=8888 umi dev
           umi: join(api.paths.absTmpPath, 'umi.ts'),
         },
       });
+
       const opts: any = {
         config: api.config,
         pkg: api.pkg,
@@ -349,6 +350,14 @@ PORT=8888 umi dev
           ...(api.config.mfsu?.include || []),
         ]),
         startBuildWorker,
+        onBeforeMiddleware(app: any) {
+          api.applyPlugins({
+            key: 'onBeforeMiddleware',
+            args: {
+              app,
+            },
+          });
+        },
       };
 
       await api.applyPlugins({

diff --git a/packages/preset-umi/src/registerMethods.ts b/packages/preset-umi/src/registerMethods.ts
@@ -22,6 +22,7 @@ export default (api: IApi) => {
     'onCheckPkgJSON',
     'onCheckCode',
     'onCheckConfig',
+    'onBeforeMiddleware',
     'addBeforeMiddlewares',
     'addLayouts',
     'addMiddlewares',

diff --git a/packages/preset-umi/src/types.ts b/packages/preset-umi/src/types.ts
@@ -1,6 +1,6 @@
 // sort-object-keys
 import type { ImportDeclaration } from '@umijs/bundler-utils/compiled/@babel/types';
-import type { RequestHandler, webpack } from '@umijs/bundler-webpack';
+import type { RequestHandler, webpack, Express } from '@umijs/bundler-webpack';
 import type WebpackChain from '@umijs/bundler-webpack/compiled/webpack-5-chain';
 import type { IConfig } from '@umijs/bundler-webpack/dist/types';
 import type {
@@ -132,6 +132,9 @@ export type IApi = PluginAPI &
       }
     >;
     onBeforeCompiler: IEvent<{ compiler: 'vite' | 'webpack'; opts: any }>;
+    onBeforeMiddleware: IEvent<{
+      app: Express;
+    }>;
     onBuildComplete: IEvent<{
       err?: Error;
       isFirstCompile: boolean;