Merge pull request #5084 from VisActor/feat/react-vtable-19

fix: vue build error

Author: fangsmile

tools/bundler/bin/index.js

@@ -1,4 +1,47 @@
 #!/usr/bin/env node
 "use strict";
 
-require('../output/bootstrap');
+const fs = require('fs');
+const path = require('path');
+const childProcess = require('child_process');
+
+const bootstrapPath = path.join(__dirname, '../output/bootstrap');
+
+function tryRequireBootstrap() {
+  return require(bootstrapPath);
+}
+
+try {
+  tryRequireBootstrap();
+} catch (err) {
+  const isMissingBootstrap =
+    err &&
+    err.code === 'MODULE_NOT_FOUND' &&
+    typeof err.message === 'string' &&
+    (err.message.includes(bootstrapPath) || err.message.includes('output/bootstrap'));
+
+  if (!isMissingBootstrap) {
+    throw err;
+  }
+
+  const projectRoot = path.join(__dirname, '..');
+  const tsconfigPath = path.join(projectRoot, 'tsconfig.json');
+  const outputDir = path.join(projectRoot, 'output');
+
+  if (!fs.existsSync(tsconfigPath)) {
+    throw err;
+  }
+
+  try {
+    const tscBin = require.resolve('typescript/bin/tsc', { paths: [projectRoot] });
+    fs.mkdirSync(outputDir, { recursive: true });
+    const result = childProcess.spawnSync(process.execPath, [tscBin, '--project', tsconfigPath], { stdio: 'inherit' });
+    if (result.status !== 0) {
+      process.exit(result.status || 1);
+    }
+  } catch (compileErr) {
+    throw err;
+  }
+
+  tryRequireBootstrap();
+}

tools/bundler/src/logic/rollup.config.ts

@@ -15,11 +15,68 @@ import Alias from '@rollup/plugin-alias';
 import postcss from 'rollup-plugin-postcss';
 import strip from '@rollup/plugin-strip';
 import vue from '@vitejs/plugin-vue';
+import * as ts from 'typescript';
 import * as path from 'path';
 import { Config } from './config';
 
 const useTypescriptPlugin2 = process.env.USE_TYPESCRIPT2 === 'true';
-const typescript = useTypescriptPlugin2 ? require('rollup-plugin-typescript2') : require('@rollup/plugin-typescript');
+const typescript1 = require('@rollup/plugin-typescript');
+const typescript2 = require('rollup-plugin-typescript2');
+
+function transpileVueTsSfc(): Plugin {
+  return {
+    name: 'transpile-vue-ts-sfc',
+    transform(code, id) {
+      if (!id.includes('?vue')) {
+        return null;
+      }
+      if (!id.includes('&lang.ts') && !id.includes('&lang.tsx')) {
+        return null;
+      }
+      const result = ts.transpileModule(code, {
+        compilerOptions: {
+          target: ts.ScriptTarget.ES2017,
+          module: ts.ModuleKind.ESNext,
+          jsx: ts.JsxEmit.Preserve,
+          sourceMap: true
+        },
+        fileName: id
+      });
+      return {
+        code: result.outputText,
+        map: result.sourceMapText ? JSON.parse(result.sourceMapText) : null
+      };
+    }
+  };
+}
+
+function transpileTsForRollup(): Plugin {
+  return {
+    name: 'transpile-ts-for-rollup',
+    transform(code, id) {
+      if (id.endsWith('.d.ts')) {
+        return null;
+      }
+      const isTsLike = id.endsWith('.ts') || id.endsWith('.tsx') || id.includes('&lang.ts') || id.includes('&lang.tsx');
+      if (!isTsLike) {
+        return null;
+      }
+      const result = ts.transpileModule(code, {
+        compilerOptions: {
+          target: ts.ScriptTarget.ES2017,
+          module: ts.ModuleKind.ESNext,
+          jsx: ts.JsxEmit.Preserve,
+          sourceMap: true
+        },
+        fileName: id
+      });
+      return {
+        code: result.outputText,
+        map: result.sourceMapText ? JSON.parse(result.sourceMapText) : null
+      };
+    }
+  };
+}
 
 function getExternal(
   rawPackageJson: RawPackageJson,
@@ -42,25 +99,26 @@ export function getRollupOptions(
   config: Config,
   tsconfigOverride?: Record<string, unknown>
 ): RollupOptions {
-  const tsOption = {
-    tsconfig: path.resolve(projectRoot, config.tsconfig)
-  };
-
-  if (useTypescriptPlugin2 && tsconfigOverride) {
-    (tsOption as any).tsconfigOverride = tsconfigOverride;
-  }
+  const tsconfigPath = path.resolve(projectRoot, config.tsconfig);
+  const typescriptPlugin: Plugin = useTypescriptPlugin2
+    ? typescript2(tsconfigOverride ? { tsconfig: tsconfigPath, tsconfigOverride } : { tsconfig: tsconfigPath })
+    : typescript1({ tsconfig: tsconfigPath });
   return {
     input: entry,
     external: getExternal(rawPackageJson, config.external),
     ...config.rollupOptions,
     plugins: [
-      resolve(),
+      resolve({
+        extensions: ['.mjs', '.js', '.jsx', '.json', '.node', '.ts', '.tsx', '.mts', '.cts', '.vue']
+      }),
       commonjs(),
       vue(),
       // typescript(),
-      babel({ ...babelPlugins, babelHelpers: 'bundled' }),
       replace({ ...config.envs, preventAssignment: true }),
-      typescript(tsOption),
+      transpileVueTsSfc(),
+      typescriptPlugin,
+      ...(useTypescriptPlugin2 ? [transpileTsForRollup()] : []),
+      babel({ ...babelPlugins, babelHelpers: 'bundled' }),
       postcss({
         extensions: ['.css']
       }),