fix(cli): failed to compile ts in sfc (#8109)

packages/vant-cli/src/compiler/babel-preset-vue-ts.ts

@@ -0,0 +1,26 @@
+/**
+ * @babel/preset-typescript 不支持编译 Vue 文件中的 ts 代码
+ * 通过手动添加 @babel/plugin-transform-typescript 的方式来解决这个问题
+ * see: https://github.com/babel/babel-loader/pull/738
+ */
+
+import { readFileSync } from 'fs';
+import { declare } from '@babel/helper-plugin-utils';
+
+module.exports = declare(() => ({
+  overrides: [
+    {
+      test: (filePath: string) => {
+        if (/\.vue$/.test(filePath)) {
+          const template = readFileSync(filePath, { encoding: 'utf8' });
+          return (
+            template.includes('lang="ts"') || template.includes("lang='ts'")
+          );
+        }
+
+        return false;
+      },
+      plugins: [require('@babel/plugin-transform-typescript')],
+    },
+  ],
+}));

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -83,7 +83,6 @@ export function parseSfc(filePath: string) {
 export async function compileSfc(filePath: string): Promise<any> {
   const tasks = [remove(filePath)];
   const source = readFileSync(filePath, 'utf-8');
-  const jsFilePath = replaceExt(filePath, '.js');
   const descriptor = parseSfc(filePath);
   const { template, styles } = descriptor;
 
@@ -92,6 +91,9 @@ export async function compileSfc(filePath: string): Promise<any> {
 
   // compile js part
   if (descriptor.script) {
+    const lang = descriptor.script.lang || 'js';
+    const scriptFilePath = replaceExt(filePath, `.${lang}`);
+
     tasks.push(
       new Promise((resolve, reject) => {
         let script = descriptor.script!.content;
@@ -106,8 +108,8 @@ export async function compileSfc(filePath: string): Promise<any> {
           script = injectScopeId(script, scopeId);
         }
 
-        writeFileSync(jsFilePath, script);
-        compileJs(jsFilePath).then(resolve).catch(reject);
+        writeFileSync(scriptFilePath, script);
+        compileJs(scriptFilePath).then(resolve).catch(reject);
       })
     );
   }

packages/vant-cli/src/config/babel.config.ts

@@ -25,6 +25,7 @@ module.exports = function(api?: ConfigAPI) {
         },
       ],
       '@babel/preset-typescript',
+      require('../compiler/babel-preset-vue-ts'),
     ],
     plugins: [
       [

packages/vant-cli/src/module.d.ts

@@ -9,4 +9,5 @@ declare module 'release-it';
 declare module 'html-webpack-plugin';
 declare module 'conventional-changelog';
 declare module '@vant/markdown-vetur';
+declare module '@babel/helper-plugin-utils';
 declare module '@nuxt/friendly-errors-webpack-plugin';