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

This commit is contained in:
roymondchen 2025-08-26 20:40:24 +08:00
parent f267643c42
commit 0967c3449e
11 changed files with 201 additions and 127 deletions

25
pnpm-lock.yaml generated
View File

@ -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
version: 1.10.0
specifier: ^1.11.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
@ -1179,7 +1188,7 @@ importers:
specifier: ^1.91.0
version: 1.91.0
terser:
specifier: ^ 5.43.1
specifier: ^5.43.1
version: 5.43.1
typescript:
specifier: 'catalog:'
@ -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

View File

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

View File

@ -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 {};
});

View File

@ -8,37 +8,33 @@
},
"scripts": {
"tmagic": "tmagic entry",
"dev": "vite --config dev.vite.config.ts",
"build": "npm run build:libs && npm run build:page && npm run build:playground",
"build:page": "vite build --config build.vite.config.ts --mode page",
"build:playground": "vite build --config build.vite.config.ts --mode playground",
"build:libs": "tmagic entry && npm run build:config && npm run build:value && npm run build:event && npm run build:ds:libs",
"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"
"dev": "vite --force",
"serve": "vite preview",
"build": "rm -rf ./dist && node scripts/build.mjs --type=all && npm run build:client",
"build:libs": "tmagic entry && node scripts/build.mjs --type=res",
"build:client": "vite build --config ./page/vite.config.ts && vite build --config ./playground/vite.config.ts"
},
"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",
"terser": "^ 5.43.1",
"terser": "^5.43.1",
"typescript": "catalog:",
"vite": "catalog:"
}

View File

@ -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>

View File

@ -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',
},
});

View File

@ -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>

View File

@ -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',
},
});

View File

@ -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);

View File

@ -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'],
},
},
};
});

View File

@ -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'),
},
},
},
});