From 3acee8bf2b032d5b44adde15214e6375b8ac17e4 Mon Sep 17 00:00:00 2001
From: suncohey <49851571+suncohey@users.noreply.github.com>
Date: Sat, 29 Jul 2023 11:29:46 +0800
Subject: [PATCH] feat(cli): support replace ext in dynamic imports (#12046)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(get-deps): import('../foo.vue') => import('../foo.mjs') 的替换

* feat(get-deps): import('../foo.vue') => import('../foo.mjs') 的替换

* feat(get-deps): 对应正则的优化

* feat(get-deps): 对应正则的优化

* feat(get-deps): 对应正则的优化之前的太宽泛了

* feat(get-deps): 对应正则的优化之前的太宽泛了

* feat(get-deps): 对应正则的优化之前的太宽泛了

---------

Co-authored-by: sunguohui <sunguohui@vcom.com>
---
 packages/vant-cli/src/compiler/get-deps.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/vant-cli/src/compiler/get-deps.ts b/packages/vant-cli/src/compiler/get-deps.ts
index 8260c6c4f..3009bdbd2 100644
--- a/packages/vant-cli/src/compiler/get-deps.ts
+++ b/packages/vant-cli/src/compiler/get-deps.ts
@@ -8,6 +8,9 @@ let existsCache: Record<string, boolean> = {};
 // https://regexr.com/47jlq
 const IMPORT_RE =
   /import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
+
+const IMPORT_NOF_RE = /import\s*\(\s*?['"].+?['"]\)/g;
+
 const EXPORT_FROM_RE =
   /@?export\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
 
@@ -16,6 +19,11 @@ function matchImports(code: string): string[] {
   return imports.filter((line) => !line.includes('import type'));
 }
 
+function matchImportsNof(code: string): string[] {
+  const imports = code.match(IMPORT_NOF_RE) || [];
+  return imports.filter((line) => !line.includes('import type'));
+}
+
 function matchExportFroms(code: string): string[] {
   const exportFroms = code.match(EXPORT_FROM_RE) || [];
   return exportFroms.filter((line) => !line.includes('export type'));
@@ -97,17 +105,23 @@ export function getDeps(filePath: string) {
 /**
  * 1. Replace .vue extension
  * @example "import App from 'App.vue';" => "import App from 'App.xxx';"
+ * @example "defineAsyncComponent(() => import('../xxx.vue'))" => "defineAsyncComponent(() => import('../xxx.xxx'));"
  *
  * 2. if using .mjs or .cjs, complete the import path
  * @example import './foo' -> import './foo.mjs'
  * @example import './foo' -> import './foo/index.mjs'
+ * @example "defineAsyncComponent(() => import('../foo.vue'))" => "defineAsyncComponent(() => import('../foo.mjs'));"
  */
 export function replaceScriptImportExt(
   code: string,
   filePath: string,
   ext: string,
 ) {
-  const imports = [...matchImports(code), ...matchExportFroms(code)];
+  const imports = [
+    ...matchImports(code),
+    ...matchImportsNof(code),
+    ...matchExportFroms(code),
+  ];
 
   const updateImport = (index: number, newImport: string) => {
     code = code.replace(imports[index], newImport);