fix(preset-built-in): fix mfsu assets mismatch with various publicPath (

umijs#7013) (umijs#7044) (umijs#7067) * fix(preset-built-in): fix mfsu assets mismatch with various publicPath * fix(mfsu): make mfsu assets judge more extensible with api Co-authored-by: KM.Seven <[email protected]>
ctrln · Jul 26, 2021 · be17b40 · be17b40
1 parent af4f22c
commit be17b40
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 14 deletions.
diff --git a/packages/preset-built-in/src/plugins/features/mfsu/mfsu.test.ts b/packages/preset-built-in/src/plugins/features/mfsu/mfsu.test.ts
@@ -1,6 +1,6 @@
 import { winPath } from '@umijs/utils';
 import { IApi } from 'umi';
-import { getMfsuPath } from './mfsu';
+import { getMfsuPath, normalizeReqPath } from './mfsu';
 
 test('functions: get mfsu path', () => {
   // @ts-ignore
@@ -25,3 +25,137 @@ test('functions: get mfsu path', () => {
     '/work/xxx/yyy/zzz',
   );
 });
+
+test('normalizeReqPath', () => {
+  // publicPath should be normalized as '/'
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: '/' } } as IApi,
+      '/mf-va_xxxxxxxxxxx.js',
+    ),
+  ).toStrictEqual({
+    isMfAssets: true,
+    normalPublicPath: '/',
+    fileRelativePath: 'mf-va_xxxxxxxxxxx.js',
+  });
+
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: './' } } as IApi,
+      '/mf-dep_xxxxxx.js',
+    ),
+  ).toStrictEqual({
+    isMfAssets: true,
+    normalPublicPath: '/',
+    fileRelativePath: 'mf-dep_xxxxxx.js',
+  });
+
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: '../../../' } } as IApi,
+      '/mf-dep_xxxxxx.js',
+    ),
+  ).toStrictEqual({
+    isMfAssets: true,
+    normalPublicPath: '/',
+    fileRelativePath: 'mf-dep_xxxxxx.js',
+  });
+
+  // not mfsu asserts
+
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: '../../../' } } as IApi,
+      '/a/b/c/mf-dep_xxxxxx.js',
+    ),
+  ).toStrictEqual({
+    isMfAssets: false,
+    normalPublicPath: '/',
+    fileRelativePath: 'a/b/c/mf-dep_xxxxxx.js',
+  });
+
+  // publicPath should be normalized as '/xxx/xxx/'
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: './public_path/' } } as IApi,
+      '/public_path/mf-dep_xxxxxx.js',
+    ),
+  ).toStrictEqual({
+    isMfAssets: true,
+    normalPublicPath: '/public_path/',
+    fileRelativePath: 'mf-dep_xxxxxx.js',
+  });
+
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: '../../public_path/' } } as IApi,
+      '/public_path/mf-dep_xxxxxx.js',
+    ),
+  ).toStrictEqual({
+    isMfAssets: true,
+    normalPublicPath: '/public_path/',
+    fileRelativePath: 'mf-dep_xxxxxx.js',
+  });
+
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: './public_path/a/b/c/' } } as IApi,
+      '/public_path/a/b/c/mf-static/cfile.html',
+    ),
+  ).toStrictEqual({
+    isMfAssets: true,
+    normalPublicPath: '/public_path/a/b/c/',
+    fileRelativePath: 'mf-static/cfile.html',
+  });
+
+  // not mfsu asserts
+
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: './public_path/' } } as IApi,
+      '/public_path/a/b/c/mf-dep_xxxxxx.js',
+    ),
+  ).toStrictEqual({
+    isMfAssets: false,
+    normalPublicPath: '/public_path/',
+    fileRelativePath: 'a/b/c/mf-dep_xxxxxx.js',
+  });
+
+  // publicPath with hosts
+  expect(
+    normalizeReqPath(
+      {
+        config: { publicPath: 'http://10.0.0.111/public_path/a/b/c/' },
+      } as IApi,
+      '/public_path/a/b/c/mf-static/cfile.html',
+    ),
+  ).toStrictEqual({
+    isMfAssets: true,
+    normalPublicPath: '/public_path/a/b/c/',
+    fileRelativePath: 'mf-static/cfile.html',
+  });
+
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: 'http://umijs.org/public_path/a/b/c/' } } as IApi,
+      '/public_path/a/b/c/mf-static/cfile.html',
+    ),
+  ).toStrictEqual({
+    isMfAssets: true,
+    normalPublicPath: '/public_path/a/b/c/',
+    fileRelativePath: 'mf-static/cfile.html',
+  });
+
+  // not mfsu asserts
+
+  expect(
+    normalizeReqPath(
+      { config: { publicPath: 'http://umijs.org/' } } as IApi,
+      '/a/b/c/mf-static/cfile.html',
+    ),
+  ).toStrictEqual({
+    isMfAssets: false,
+    normalPublicPath: '/',
+    fileRelativePath: 'a/b/c/mf-static/cfile.html',
+  });
+});
diff --git a/packages/preset-built-in/src/plugins/features/mfsu/mfsu.ts b/packages/preset-built-in/src/plugins/features/mfsu/mfsu.ts
@@ -51,6 +51,27 @@ export const getMfsuPath = (api: IApi, { mode }: { mode: TMode }) => {
   }
 };
 
+export const normalizeReqPath = (api: IApi, reqPath: string) => {
+  let normalPublicPath = api.config.publicPath as string;
+  if (/^https?\:\/\//.test(normalPublicPath)) {
+    normalPublicPath = new URL(normalPublicPath).pathname;
+  } else {
+    normalPublicPath = normalPublicPath.replace(/^(?:\.+\/?)+/, '/'); // normalPublicPath should start with '/'
+  }
+  const isMfAssets =
+    reqPath.startsWith(`${normalPublicPath}mf-va_`) ||
+    reqPath.startsWith(`${normalPublicPath}mf-dep_`) ||
+    reqPath.startsWith(`${normalPublicPath}mf-static/`);
+  const fileRelativePath = reqPath
+    .replace(new RegExp(`^${normalPublicPath}`), '/')
+    .slice(1);
+  return {
+    isMfAssets,
+    normalPublicPath,
+    fileRelativePath,
+  };
+};
+
 export default function (api: IApi) {
   const webpackAlias = {};
   const webpackExternals = {};
@@ -256,21 +277,14 @@ export default function (api: IApi) {
   api.addBeforeMiddlewares(() => {
     return (req, res, next) => {
       const path = req.path;
-      // we should remove the first "." to prevent incorrect target such as: ./mf-va_.
-      // because we usually set publicPath: ./ for electron app
-      const publicPath = (api.config.publicPath as string).startsWith('./') ? '/' : api.config.publicPath;
-
-      if (
-        path.startsWith(`${publicPath}mf-va_`) ||
-        path.startsWith(`${publicPath}mf-dep_`) ||
-        path.startsWith(`${publicPath}mf-static/`)
-      ) {
+      const { isMfAssets, fileRelativePath } = normalizeReqPath(api, req.path);
+      if (isMfAssets) {
         depBuilder.onBuildComplete(() => {
-          const filePath = path
-            .replace(new RegExp(`^${publicPath}`), '/')
-            .slice(1);
           const mfsuPath = getMfsuPath(api, { mode: 'development' });
-          const content = readFileSync(join(mfsuPath, filePath), 'utf-8');
+          const content = readFileSync(
+            join(mfsuPath, fileRelativePath),
+            'utf-8',
+          );
           res.setHeader('content-type', mime.lookup(parse(path || '').ext));
           // 排除入口文件，因为 hash 是入口文件控制的
           if (!/remoteEntry.js/.test(req.url)) {