feat: use esm for wrappers when dynamicImport is configured (#5387)

umijs · Sep 9, 2020 · 2cda1cf · 2cda1cf
1 parent a1d24bd
commit 2cda1cf
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/packages/core/src/Route/routesToJSON.test.ts b/packages/core/src/Route/routesToJSON.test.ts
@@ -118,3 +118,53 @@ test('component with function', () => {
   `.trim(),
   );
 });
+
+test('wrappers', () => {
+  const ret = routesToJSON({
+    routes: [
+      {
+        path: '/',
+        component: '@/pages/index.ts',
+        wrappers: ['@/wrappers/foo.ts'],
+      },
+    ],
+    config: {},
+  });
+  expect(ret).toEqual(
+    `
+[
+  {
+    "path": "/",
+    "component": require('@/pages/index.ts').default,
+    "wrappers": [require('@/wrappers/foo.ts').default]
+  }
+]
+  `.trim(),
+  );
+});
+
+test('wrappers with dynamicImport', () => {
+  const ret = routesToJSON({
+    routes: [
+      {
+        path: '/',
+        component: '@/pages/index.ts',
+        wrappers: ['@/wrappers/foo.ts'],
+      },
+    ],
+    config: {
+      dynamicImport: true,
+    },
+  });
+  expect(ret).toEqual(
+    `
+[
+  {
+    "path": "/",
+    "component": dynamic({ loader: () => import(/* webpackChunkName: 'p__index' */'@/pages/index.ts')}),
+    "wrappers": [dynamic({ loader: () => import(/* webpackChunkName: 'wrappers' */'@/wrappers/foo.ts')})]
+  }
+]
+  `.trim(),
+  );
+});
diff --git a/packages/core/src/Route/routesToJSON.ts b/packages/core/src/Route/routesToJSON.ts
@@ -69,7 +69,15 @@ export default function ({ routes, config, cwd }: IOpts) {
         }
       case 'wrappers':
         const wrappers = value.map((wrapper: string) => {
-          return `require('${wrapper}').default`;
+          if (config.dynamicImport) {
+            let loading = '';
+            if (config.dynamicImport.loading) {
+              loading = `, loading: LoadingComponent`;
+            }
+            return `dynamic({ loader: () => import(/* webpackChunkName: 'wrappers' */'${wrapper}')${loading}})`;
+          } else {
+            return `require('${wrapper}').default`;
+          }
         });
         return `[${wrappers.join(', ')}]`;
       default: