feat: bump esbuild -> 0.17.19 , use the new context api

examples/mfsu-independent-e2e/package.json

@@ -27,7 +27,7 @@
     "babel-loader": "^9.1.2",
     "cross-env": "^7.0.3",
     "cypress": "^12.0.0",
-    "esbuild": "0.16.17",
+    "esbuild": "0.17.19",
     "esbuild-register": "^3.4.2",
     "html-webpack-plugin": "^5.5.0",
     "start-server-and-test": "^1.15.2",

examples/mfsu-independent/package.json

@@ -22,7 +22,7 @@
     "@types/react-dom": "^18.0.10",
     "@umijs/mfsu": "workspace:*",
     "babel-loader": "^9.1.2",
-    "esbuild": "0.16.17",
+    "esbuild": "0.17.19",
     "html-webpack-plugin": "^5.5.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",

packages/bundler-esbuild/src/plugins/watchRebuild.ts

@@ -0,0 +1,57 @@
+import type {
+  BuildFailure,
+  BuildResult,
+  Message,
+  Plugin,
+} from '@umijs/bundler-utils/compiled/esbuild';
+
+// Fork from esbuild https://github.com/evanw/esbuild/blob/main/lib/shared/common.ts#L1640
+function failureErrorWithLog(
+  text: string,
+  errors: Message[],
+  warnings: Message[],
+): BuildFailure {
+  let limit = 5;
+  let summary =
+    errors.length < 1
+      ? ''
+      : ` with ${errors.length} error${errors.length < 2 ? '' : 's'}:` +
+        errors
+          .slice(0, limit + 1)
+          .map((e, i) => {
+            if (i === limit) return '\n...';
+            if (!e.location) return `\nerror: ${e.text}`;
+            let { file, line, column } = e.location;
+            let pluginText = e.pluginName ? `[plugin: ${e.pluginName}] ` : '';
+            return `\n${file}:${line}:${column}: ERROR: ${pluginText}${e.text}`;
+          })
+          .join('');
+  let error: any = new Error(`${text}${summary}`);
+  error.errors = errors;
+  error.warnings = warnings;
+  return error;
+}
+
+export function esbuildWatchRebuildPlugin(options: {
+  onRebuild: (error: BuildFailure | null, result: BuildResult | null) => void;
+}): Plugin {
+  return {
+    name: 'watch-rebuild-plugin',
+    setup(build) {
+      let count = 0;
+      build.onEnd((result) => {
+        if (count++ === 0) {
+          return;
+        }
+        if (result.errors.length > 0) {
+          options.onRebuild(
+            failureErrorWithLog('Build failed', result.errors, result.warnings),
+            null,
+          );
+          return;
+        }
+        options.onRebuild(null, result);
+      });
+    },
+  };
+}

packages/bundler-utils/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@umijs/utils": "workspace:*",
-    "esbuild": "0.16.17",
+    "esbuild": "0.17.19",
     "regenerate": "^1.4.2",
     "regenerate-unicode-properties": "10.1.0",
     "spdy": "^4.0.2"

packages/preset-umi/package.json

@@ -29,6 +29,7 @@
     "@svgr/core": "6.5.1",
     "@umijs/ast": "workspace:*",
     "@umijs/babel-preset-umi": "workspace:*",
+    "@umijs/bundler-esbuild": "workspace:*",
     "@umijs/bundler-utils": "workspace:*",
     "@umijs/bundler-vite": "workspace:*",
     "@umijs/bundler-webpack": "workspace:*",

packages/preset-umi/src/features/apiRoute/dev-server/esbuild.ts

@@ -1,3 +1,4 @@
+import { esbuildWatchRebuildPlugin } from '@umijs/bundler-esbuild/dist/plugins/watchRebuild';
 import esbuild from '@umijs/bundler-utils/compiled/esbuild';
 import { logger } from '@umijs/utils';
 import { join, resolve } from 'path';
@@ -11,7 +12,7 @@ export default async function (api: IApi, apiRoutes: IRoute[]) {
     join(api.paths.absTmpPath, 'api', r.file),
   );
 
-  await esbuild.build({
+  const ctx = await esbuild.context({
     format: 'cjs',
     platform: 'node',
     bundle: true,
@@ -20,17 +21,19 @@ export default async function (api: IApi, apiRoutes: IRoute[]) {
       resolve(api.paths.absTmpPath, 'api/_middlewares.ts'),
     ],
     outdir: resolve(api.paths.cwd, OUTPUT_PATH),
-    plugins: [esbuildIgnorePathPrefixPlugin()],
-    watch: {
-      onRebuild(error) {
-        if (error) logger.error('Compile api routes failed: ', error);
-
-        // Reload API route modules
-        Object.keys(require.cache).forEach((modulePath) => {
-          if (modulePath.startsWith(join(api.paths.cwd, OUTPUT_PATH)))
-            delete require.cache[modulePath];
-        });
-      },
-    },
+    plugins: [
+      esbuildIgnorePathPrefixPlugin(),
+      esbuildWatchRebuildPlugin({
+        onRebuild(error) {
+          if (error) logger.error('Compile api routes failed: ', error);
+          // Reload API route modules
+          Object.keys(require.cache).forEach((modulePath) => {
+            if (modulePath.startsWith(join(api.paths.cwd, OUTPUT_PATH)))
+              delete require.cache[modulePath];
+          });
+        },
+      }),
+    ],
   });
+  await ctx.watch();
 }

packages/preset-umi/src/features/prepare/build.test.ts

@@ -4,13 +4,13 @@ import { build } from './build';
 const fixtures = path.join(__dirname, '../../../fixtures/prepare-build');
 
 test('build', async () => {
-  const res = await build({
+  const [res] = await build({
     entryPoints: [path.join(fixtures, 'normal/index.ts')],
     config: {
       cwd: path.join(fixtures, 'normal'),
     },
   });
-  const text = res.outputFiles![0].text;
+  const text = res?.outputFiles![0].text;
   expect(text).toContain(`import "foo"`);
   expect(text).toContain(`import "foo/bar"`);
   expect(text).toContain(`import "foo/bar.ts"`);

packages/preset-umi/src/features/prepare/build.ts

@@ -1,4 +1,9 @@
-import esbuild from '@umijs/bundler-utils/compiled/esbuild';
+import { esbuildWatchRebuildPlugin } from '@umijs/bundler-esbuild/dist/plugins/watchRebuild';
+import esbuild, {
+  BuildContext,
+  BuildOptions,
+  BuildResult,
+} from '@umijs/bundler-utils/compiled/esbuild';
 import { logger } from '@umijs/utils';
 import path from 'path';
 import { esbuildAliasPlugin } from './esbuildPlugins/esbuildAliasPlugin';
@@ -14,10 +19,10 @@ export async function build(opts: {
   config: { alias?: any; cwd: string };
   plugins?: esbuild.Plugin[];
   write?: boolean;
-}) {
+}): Promise<[BuildResult | void, BuildContext | undefined]> {
   const outdir = path.join(path.dirname(opts.entryPoints[0]), 'out');
   const alias = opts.config?.alias || {};
-  return await esbuild.build({
+  const buildOptions: BuildOptions = {
     // 需要指定 absWorkingDir 兼容 APP_ROOT 的情况
     absWorkingDir: opts.config.cwd,
     format: 'esm',
@@ -31,17 +36,6 @@ export async function build(opts: {
       '.ts': 'ts',
       '.tsx': 'tsx',
     },
-    watch: !!opts.watch && {
-      onRebuild(err, result) {
-        if (err) {
-          logger.error(`[icons] build failed: ${err}`);
-        } else {
-          if (opts.watch) {
-            opts.watch.onRebuildSuccess({ result: result! });
-          }
-        }
-      },
-    },
     // do I need this?
     // incremental: true,
     bundle: true,
@@ -59,7 +53,26 @@ export async function build(opts: {
       // if we resolve externals first, we will get { external: true }
       esbuildExternalPlugin({ alias }),
       esbuildAliasPlugin({ alias }),
+      esbuildWatchRebuildPlugin({
+        onRebuild(err, result) {
+          if (err) {
+            logger.error(`[icons] build failed: ${err}`);
+          } else {
+            if (opts.watch) {
+              opts.watch.onRebuildSuccess({ result: result! });
+            }
+          }
+        },
+      }),
       ...(opts.plugins || []),
     ],
-  });
+  };
+  if (opts.watch) {
+    const ctx = await esbuild.context(buildOptions);
+    await ctx.watch();
+    return [undefined, ctx];
+  } else {
+    const result = await esbuild.build(buildOptions);
+    return [result, undefined];
+  }
 }

packages/preset-umi/src/features/prepare/prepare.ts

@@ -87,7 +87,7 @@ export default (api: IApi) => {
         });
       }
 
-      const buildResult = await build({
+      const [buildResult, ctx] = await build({
         entryPoints,
         watch: watch && {
           async onRebuildSuccess({ result }) {
@@ -113,9 +113,13 @@ export default (api: IApi) => {
 
       if (watch) {
         addUnWatch(() => {
-          buildResult.stop?.();
+          ctx?.dispose();
         });
       }
+      if (!buildResult) {
+        return;
+      }
+
       const fileImports = await parseProjectImportSpecifiers(buildResult);
       updateAppdata({ buildResult, fileImports });
       await api.applyPlugins({

packages/preset-umi/src/features/ssr/builder/builder.ts

@@ -1,4 +1,5 @@
-import esbuild from '@umijs/bundler-utils/compiled/esbuild';
+import { esbuildWatchRebuildPlugin } from '@umijs/bundler-esbuild/dist/plugins/watchRebuild';
+import esbuild, { BuildOptions } from '@umijs/bundler-utils/compiled/esbuild';
 import { aliasUtils, isMonorepo, logger } from '@umijs/utils';
 import { resolve } from 'path';
 import { IApi } from '../../../types';
@@ -27,25 +28,14 @@ export async function build(opts: { api: IApi; watch?: boolean }) {
   // currently esbuild not support circle alias
   const alias = aliasUtils.parseCircleAlias({ alias: api.config.alias });
 
-  await esbuild.build({
+  const buildOptions: BuildOptions = {
     alias,
     format: 'cjs',
     platform: 'node',
     target: 'esnext',
     bundle: true,
     logLevel: 'silent',
     inject: [resolve(api.paths.absTmpPath, 'ssr/react-shim.js')],
-    watch: watch
-      ? {
-          onRebuild(err) {
-            logger.event('[SSR] Rebuilt');
-            delete require.cache[absServerBuildPath(api)];
-            if (err) {
-              logger.error(err);
-            }
-          },
-        }
-      : false,
     loader,
     entryPoints: [resolve(api.paths.absTmpPath, 'umi.server.ts')],
     plugins: [
@@ -54,10 +44,25 @@ export async function build(opts: { api: IApi; watch?: boolean }) {
       cssLoader({ cwd: api.cwd }),
       svgLoader({ cwd: api.cwd }),
       assetsLoader({ cwd: api.cwd }),
+      esbuildWatchRebuildPlugin({
+        onRebuild(err) {
+          logger.event('[SSR] Rebuilt');
+          delete require.cache[absServerBuildPath(api)];
+          if (err) {
+            logger.error(err);
+          }
+        },
+      }),
     ],
     outfile: absServerBuildPath(api),
     external: getExternal(),
-  });
+  };
+  if (watch) {
+    const ctx = await esbuild.context(buildOptions);
+    await ctx.watch();
+  } else {
+    await esbuild.build(buildOptions);
+  }
   const diff = new Date().getTime() - now;
   logger.info(`[SSR] Compiled in ${diff}ms`);
 }

packages/preset-umi/src/features/ssr/builder/less-loader.ts

@@ -18,9 +18,7 @@ export const lessLoader = (opts: {
         const filePath = join(args.resolveDir, args.path);
         return {
           path: filePath,
-          watchFiles: !!build.initialOptions.watch
-            ? [filePath, ...getLessImports(filePath)]
-            : undefined,
+          watchFiles: [filePath, ...getLessImports(filePath)],
         };
       });
 

packages/preset-umi/src/utils/routeExportExtractor.ts

@@ -1,6 +1,6 @@
-import esbuild from '@umijs/bundler-utils/compiled/esbuild';
+import esbuild, { BuildOptions } from '@umijs/bundler-utils/compiled/esbuild';
 import { join, resolve } from 'path';
-import type { IApi } from 'umi';
+import type { IApi } from '../types';
 
 interface IRouteExportExtractor {
   api: IApi;
@@ -31,14 +31,13 @@ export function setupRouteExportExtractor(
     });
   });
 
-  api.onBeforeCompiler(
-    async () =>
-      await setupExportExtractBuilder({
-        api,
-        entryFile,
-        outFile,
-      }),
-  );
+  api.onBeforeCompiler(async () => {
+    await setupExportExtractBuilder({
+      api,
+      entryFile,
+      outFile,
+    });
+  });
 }
 
 function generateRouteExportTmpFile(opts: IRouteExportExtractorGenTmpFileOpts) {
@@ -74,12 +73,11 @@ async function setupExportExtractBuilder(
   opts: IRouteExportExtractorSetupBuilderOpts,
 ) {
   const { api, entryFile, outFile } = opts;
-  await esbuild.build({
+  const buildOptions: BuildOptions = {
     format: 'esm',
     platform: 'browser',
     target: 'esnext',
     loader,
-    watch: api.env === 'development' && {},
     bundle: true,
     logLevel: 'error',
     entryPoints: [join(api.paths.absTmpPath, entryFile)],
@@ -107,7 +105,13 @@ async function setupExportExtractBuilder(
         },
       },
     ],
-  });
+  };
+  if (api.env === 'development') {
+    const ctx = await esbuild.context(buildOptions);
+    await ctx.watch();
+  } else {
+    await esbuild.build(buildOptions);
+  }
 }
 
 const loader: { [ext: string]: esbuild.Loader } = {

packages/testing/package.json

@@ -26,7 +26,7 @@
     "@umijs/bundler-utils": "workspace:*",
     "@umijs/utils": "workspace:*",
     "babel-jest": "^29.4.3",
-    "esbuild": "0.16.17",
+    "esbuild": "0.17.19",
     "identity-obj-proxy": "3.0.0",
     "isomorphic-unfetch": "4.0.2"
   },