build(runtime): 重构vue3 runtime的构建配置

pnpm-lock.yaml

@@ -1145,8 +1145,8 @@ importers:
         specifier: ^1.2.0
         version: 1.2.1(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(@tmagic/stage@1.6.0-beta.6(@tmagic/core@1.6.0-beta.6(typescript@5.9.2))(typescript@5.9.2))(@vue/composition-api@1.7.2(vue@3.5.20(typescript@5.9.2)))(typescript@5.9.2)(vue@3.5.20(typescript@5.9.2))
       axios:
-        specifier: ^1.10.0
+        specifier: ^1.11.0
-        version: 1.10.0
+        version: 1.11.0
       vue:
         specifier: 'catalog:'
         version: 3.5.20(typescript@5.9.2)
@@ -1154,6 +1154,9 @@ importers:
       '@tmagic/cli':
         specifier: 1.6.0-beta.6
         version: 1.6.0-beta.6(typescript@5.9.2)
+      '@types/fs-extra':
+        specifier: ^11.0.4
+        version: 11.0.4
       '@types/node':
         specifier: ^24.0.10
         version: 24.0.10
@@ -1169,6 +1172,12 @@ importers:
       '@vue/compiler-sfc':
         specifier: 'catalog:'
         version: 3.5.20
+      fs-extra:
+        specifier: ^11.3.1
+        version: 11.3.1
+      minimist:
+        specifier: ^1.2.8
+        version: 1.2.8
       rollup:
         specifier: 4.44.1
         version: 4.44.1
@@ -4932,6 +4941,10 @@ packages:
     resolution: {integrity: sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==}
     engines: {node: '>=14.14'}
 
+  fs-extra@11.3.1:
+    resolution: {integrity: sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==}
+    engines: {node: '>=14.14'}
+
   fs-extra@9.1.0:
     resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
     engines: {node: '>=10'}
@@ -11235,6 +11248,12 @@ snapshots:
       jsonfile: 6.1.0
       universalify: 2.0.1
 
+  fs-extra@11.3.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.1.0
+      universalify: 2.0.1
+
   fs-extra@9.1.0:
     dependencies:
       at-least-node: 1.0.0

runtime/vue3/.gitignore

@@ -1 +1,2 @@
 .tmagic
+dist

runtime/vue3/build.vite.config.ts

@@ -1,100 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2025 Tencent.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import path from 'path';
-
-import { defineConfig } from 'vite';
-import legacy from '@vitejs/plugin-legacy';
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-// @ts-ignore
-import externalGlobals from 'rollup-plugin-external-globals';
-
-const INVALID_CHAR_REGEX = /[\x00-\x1F\x7F<>*#"{}|^[\]`;?:&=+$,]/g;
-const DRIVE_LETTER_REGEX = /^[a-z]:/i;
-
-export default defineConfig(({ mode }) => {
-  if (['value', 'config', 'event', 'ds:value', 'ds:config', 'ds:event'].includes(mode)) {
-    const capitalToken = mode
-      .split(':')
-      .map((word) => word[0].toUpperCase() + word.slice(1))
-      .join('');
-
-    const fileName = mode.replace(':', '-');
-
-    return {
-      publicDir: './.tmagic/public',
-      build: {
-        cssCodeSplit: false,
-        sourcemap: true,
-        minify: false,
-        target: 'esnext',
-        outDir: `../../playground/public/entry/vue3/${fileName}`,
-
-        lib: {
-          entry: `.tmagic/${fileName}-entry.ts`,
-          name: `magicPreset${capitalToken}s`,
-          fileName: 'index',
-          formats: ['umd'],
-        },
-      },
-    };
-  }
-
-  if (['page', 'playground'].includes(mode)) {
-    return {
-      plugins: [
-        vue(),
-        vueJsx(),
-        externalGlobals({ 'vue-demi': 'VueDemi', vue: 'Vue' }, { exclude: [`./${mode}/index.html`] }),
-        legacy({
-          targets: ['defaults', 'not IE 11'],
-        }),
-      ],
-
-      root: `./${mode}/`,
-
-      publicDir: '../public',
-
-      base: `/tmagic-editor/playground/runtime/vue3/${mode}`,
-
-      optimizeDeps: {
-        exclude: ['vue-demi'],
-      },
-
-      build: {
-        emptyOutDir: true,
-        sourcemap: true,
-        outDir: path.resolve(process.cwd(), `../../playground/public/runtime/vue3/${mode}`),
-        rollupOptions: {
-          external: ['vue', 'vue-demi'],
-          output: {
-            // https://github.com/rollup/rollup/blob/master/src/utils/sanitizeFileName.ts
-            sanitizeFileName(name) {
-              const match = DRIVE_LETTER_REGEX.exec(name);
-              const driveLetter = match ? match[0] : '';
-              return driveLetter + name.slice(driveLetter.length).replace(INVALID_CHAR_REGEX, '');
-            },
-          },
-        },
-      },
-    };
-  }
-
-  return {};
-});

runtime/vue3/package.json

@@ -8,33 +8,29 @@
   },
   "scripts": {
     "tmagic": "tmagic entry",
-    "dev": "vite --config dev.vite.config.ts",
+    "dev": "vite --force",
-    "build": "npm run build:libs && npm run build:page && npm run build:playground",
+    "serve": "vite preview",
-    "build:page": "vite build --config build.vite.config.ts --mode page",
+    "build": "rm -rf ./dist && node scripts/build.mjs --type=all && npm run build:client",
-    "build:playground": "vite build --config build.vite.config.ts --mode playground",
+    "build:libs": "tmagic entry && node scripts/build.mjs --type=res",
-    "build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event && npm run build:ds:libs",
+    "build:client": "vite build --config ./page/vite.config.ts && vite build --config ./playground/vite.config.ts"
-    "build:ds:libs": "npm run build:ds:config && npm run build:ds:value && npm run build:ds:event",
-    "build:config": "vite build --config build.vite.config.ts --mode config",
-    "build:value": "vite build --config build.vite.config.ts --mode value",
-    "build:event": "vite build --config build.vite.config.ts --mode event",
-    "build:ds:config": "vite build --config build.vite.config.ts --mode ds:config",
-    "build:ds:value": "vite build --config build.vite.config.ts --mode ds:value",
-    "build:ds:event": "vite build --config build.vite.config.ts --mode ds:event"
   },
   "dependencies": {
     "@tmagic/core": "1.6.0-beta.6",
     "@tmagic/stage": "1.6.0-beta.6",
     "@tmagic/vue-runtime-help": "^1.2.0",
-    "axios": "^1.10.0",
+    "axios": "^1.11.0",
     "vue": "catalog:"
   },
   "devDependencies": {
     "@tmagic/cli": "1.6.0-beta.6",
+    "@types/fs-extra": "^11.0.4",
     "@types/node": "^24.0.10",
     "@vitejs/plugin-legacy": "^7.2.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitejs/plugin-vue-jsx": "^5.1.0",
     "@vue/compiler-sfc": "catalog:",
+    "fs-extra": "^11.3.1",
+    "minimist": "^1.2.8",
     "rollup": "4.44.1",
     "rollup-plugin-external-globals": "^0.13.0",
     "sass": "^1.91.0",

runtime/vue3/page/index.html

@@ -25,9 +25,6 @@
         display: none;
       }
     </style>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.global.prod.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
   </head>
   <body style="font-size: 14px">
     <div id="app"></div>

runtime/vue3/page/vite.config.ts

@@ -0,0 +1,36 @@
+import path from 'node:path';
+
+import { defineConfig } from 'vite';
+
+import fse from 'fs-extra';
+
+import baseConfig from '../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+
+  plugins: [
+    ...(baseConfig.plugins || []),
+    {
+      name: 'vite-plugin-copy-runtime',
+      apply: 'build',
+      enforce: 'post',
+      closeBundle() {
+        const clientFile = path.resolve(__dirname, '../dist/page')
+        fse.copySync(clientFile, path.resolve(__dirname, '../../../playground/public/runtime/vue3/runtime/page'))
+      },
+    }
+  ],
+
+  root: './page',
+
+  publicDir: '../public',
+
+  base: `${baseConfig.base}/page`,
+
+  build: {
+    emptyOutDir: false,
+    sourcemap: true,
+    outDir: '../dist/page',
+  },
+});

runtime/vue3/playground/index.html

@@ -37,9 +37,6 @@
       background-color: rgba(51, 153, 255, 0.5) !important;
     }
   </style>
-
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.13/vue.global.prod.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
 </head>
 <body style="font-size: 14px">
   <div id="app" class="in-editor"></div>

runtime/vue3/playground/vite.config.ts

@@ -0,0 +1,35 @@
+import path from 'node:path';
+
+import { defineConfig } from 'vite';
+import fse from 'fs-extra';
+
+import baseConfig from '../vite.config';
+
+export default defineConfig({
+  ...baseConfig,
+
+  plugins: [
+    ...(baseConfig.plugins || []),
+    {
+      name: 'vite-plugin-copy-runtime',
+      apply: 'build',
+      enforce: 'post',
+      closeBundle() {
+        const clientFile = path.resolve(__dirname, '../dist/playground')
+        fse.copySync(clientFile, path.resolve(__dirname, '../../../playground/public/runtime/vue3/playground'))
+      },
+    }
+  ],
+
+  root: './playground',
+
+  publicDir: '../public',
+
+  base: `${baseConfig.base}/playground`,
+
+  build: {
+    emptyOutDir: false,
+    sourcemap: true,
+    outDir: '../dist/playground',
+  },
+});

runtime/vue3/scripts/build.mjs

@@ -0,0 +1,30 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { build as buildVite } from 'vite';
+import minimist from 'minimist';
+
+import resViteConfig from './vite.res.config.mjs';
+
+const args = minimist(process.argv.slice(2));
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const buildList = [];
+
+const buildRes = args.type === 'res' || args.type === 'all';
+
+if (buildRes) {
+  for (const mode of ['value', 'config', 'event', 'ds:value', 'ds:config', 'ds:event']) {
+    buildList.push(
+      buildVite({
+        root: path.resolve(dirname, '../'),
+        clearScreen: false,
+        configFile: false,
+        ...resViteConfig(mode),
+      }),
+    );
+  }
+}
+
+Promise.all(buildList);

runtime/vue3/scripts/vite.res.config.mjs

@@ -0,0 +1,47 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vite';
+import fse from 'fs-extra';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig((mode) => {
+  const capitalToken = mode
+    .split(':')
+    .map((word) => word[0].toUpperCase() + word.slice(1))
+    .join('');
+
+  const fileName = mode.replace(':', '-');
+
+  const publicPath = path.resolve(dirname, '../dist/entry', fileName);
+  fse.removeSync(publicPath);
+
+  return {
+    plugins: [
+      {
+        name: 'vite-plugin-copy-runtime',
+        apply: 'build',
+        enforce: 'post',
+        closeBundle() {
+          fse.copySync(publicPath, path.resolve(dirname, `../../../playground/public/entry/vue3/${fileName}`));
+        },
+      },
+    ],
+    publicDir: './.tmagic/public',
+    build: {
+      cssCodeSplit: false,
+      sourcemap: true,
+      minify: false,
+      target: 'esnext',
+      outDir: `./dist/entry/${fileName}`,
+
+      lib: {
+        entry: `.tmagic/${fileName}-entry.ts`,
+        name: `magicPreset${capitalToken}s`,
+        fileName: 'index',
+        formats: ['umd'],
+      },
+    },
+  };
+});

runtime/vue3/vite.config.ts

@@ -16,18 +16,25 @@
  * limitations under the License.
  */
 
-import path from 'path';
+import path from 'node:path';
 
 import { defineConfig } from 'vite';
+import legacy from '@vitejs/plugin-legacy';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 
 export default defineConfig({
-  plugins: [vue(), vueJsx()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    legacy({
+      targets: ['defaults', 'not IE 11'],
+    })
+  ],
 
   resolve: {
     alias: [
-      { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js') },
+      { find: /^vue$/, replacement: path.join(__dirname, 'node_modules/vue') },
       {
         find: /^@tmagic\/core\/resetcss.css/,
         replacement: path.join(__dirname, '../../packages/core/resetcss.css'),
@@ -44,7 +51,7 @@ export default defineConfig({
 
   root: './',
 
-  base: '/tmagic-editor/playground/runtime/vue3/',
+  base: '/tmagic-editor/playground/runtime/vue3',
 
   publicDir: 'public',
 
@@ -57,4 +64,13 @@ export default defineConfig({
     port: 8078,
     strictPort: true,
   },
+
+  build: {
+    rollupOptions: {
+      input: {
+        page: path.resolve(__dirname, './page/index.html'),
+        playground: path.resolve(__dirname, './playground/index.html'),
+      },
+    },
+  },
 });