From d4ee9e5fa2b9adfcab4e9dedc97677e7d701e8b2 Mon Sep 17 00:00:00 2001 From: chilingling Date: Sat, 15 Jun 2024 03:54:34 -0700 Subject: [PATCH 1/3] feat: add tinyEnginePreset as hoc viteconfig tool --- designer-demo/vite.config.js | 76 +----- packages/build/vite-config/index.js | 2 +- .../build/vite-config/src/default-config.js | 228 +++++++++--------- .../src/vite-plugins/devAliasPlugin.js | 105 ++++++++ .../src/vite-plugins/upgradeHttpsPlugin.js | 30 +++ 5 files changed, 252 insertions(+), 189 deletions(-) create mode 100644 packages/build/vite-config/src/vite-plugins/devAliasPlugin.js create mode 100644 packages/build/vite-config/src/vite-plugins/upgradeHttpsPlugin.js diff --git a/designer-demo/vite.config.js b/designer-demo/vite.config.js index 6799cb104d..e079d34b78 100644 --- a/designer-demo/vite.config.js +++ b/designer-demo/vite.config.js @@ -1,83 +1,19 @@ import path from 'node:path' -import { defineConfig, mergeConfig, loadEnv } from 'vite' -import { getDefaultConfig } from '@opentiny/tiny-engine-vite-config' +import { tinyEnginePreset } from '@opentiny/tiny-engine-vite-config' -export default defineConfig((options) => { +export default tinyEnginePreset({ + iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')], + useSourceAlias: true +}, () => { const envDir = path.resolve(process.cwd(), 'env') - const extOptions = { - ...loadEnv(options.mode, envDir, 'VITE_'), - iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')] - } - const defaultConfig = getDefaultConfig(options, extOptions) - - const devAlias = { - '@opentiny/tiny-engine/canvas': path.resolve(__dirname, '../packages/design-core/src/canvas/canvas.js'), - '@opentiny/tiny-engine': path.resolve(__dirname, '../packages/design-core/index.js'), - '@opentiny/tiny-engine-controller/js': path.resolve(__dirname, '../packages/controller/js'), - '@opentiny/tiny-engine-common/component': path.resolve(__dirname, '../packages/common/component'), - '@opentiny/tiny-engine-common': path.resolve(__dirname, '../packages/common/index.js'), - '@opentiny/tiny-engine-controller': path.resolve(__dirname, '../packages/controller/src/index.js'), - '@opentiny/tiny-engine-plugin-materials': path.resolve(__dirname, '../packages/plugins/materials/index.js'), - '@opentiny/tiny-engine-plugin-block': path.resolve(__dirname, '../packages/plugins/block/index.js'), - '@opentiny/tiny-engine-plugin-data': path.resolve(__dirname, '../packages/plugins/data/index.js'), - '@opentiny/tiny-engine-plugin-datasource': path.resolve(__dirname, '../packages/plugins/datasource/index.js'), - '@opentiny/tiny-engine-plugin-script': path.resolve(__dirname, '../packages/plugins/script/index.js'), - '@opentiny/tiny-engine-plugin-tree': path.resolve(__dirname, '../packages/plugins/tree/index.js'), - '@opentiny/tiny-engine-plugin-help': path.resolve(__dirname, '../packages/plugins/help/index.js'), - '@opentiny/tiny-engine-plugin-schema': path.resolve(__dirname, '../packages/plugins/schema/index.js'), - '@opentiny/tiny-engine-plugin-page': path.resolve(__dirname, '../packages/plugins/page/index.js'), - '@opentiny/tiny-engine-plugin-i18n': path.resolve(__dirname, '../packages/plugins/i18n/index.js'), - '@opentiny/tiny-engine-plugin-bridge': path.resolve(__dirname, '../packages/plugins/bridge/index.js'), - '@opentiny/tiny-engine-plugin-tutorial': path.resolve(__dirname, '../packages/plugins/tutorial/index.js'), - '@opentiny/tiny-engine-plugin-robot': path.resolve(__dirname, '../packages/plugins/robot/index.js'), - '@opentiny/tiny-engine-settings-panel': path.resolve(__dirname, '../packages/settings/panel/index.js'), - '@opentiny/tiny-engine-setting-events': path.resolve(__dirname, '../packages/settings/events/index.js'), - '@opentiny/tiny-engine-setting-props': path.resolve(__dirname, '../packages/settings/props/index.js'), - '@opentiny/tiny-engine-setting-styles': path.resolve(__dirname, '../packages/settings/styles/index.js'), - '@opentiny/tiny-engine-toolbar-breadcrumb': path.resolve(__dirname, '../packages/toolbars/breadcrumb/index.js'), - '@opentiny/tiny-engine-toolbar-fullscreen': path.resolve(__dirname, '../packages/toolbars/fullscreen/index.js'), - '@opentiny/tiny-engine-toolbar-lang': path.resolve(__dirname, '../packages/toolbars/lang/index.js'), - '@opentiny/tiny-engine-toolbar-layout': path.resolve(__dirname, '../packages/toolbars/layout/index.js'), - '@opentiny/tiny-engine-toolbar-checkinout': path.resolve(__dirname, '../packages/toolbars/lock/index.js'), - '@opentiny/tiny-engine-toolbar-logo': path.resolve(__dirname, '../packages/toolbars/logo/index.js'), - '@opentiny/tiny-engine-toolbar-logout': path.resolve(__dirname, '../packages/toolbars/logout/index.js'), - '@opentiny/tiny-engine-toolbar-media': path.resolve(__dirname, '../packages/toolbars/media/index.js'), - '@opentiny/tiny-engine-toolbar-preview': path.resolve(__dirname, '../packages/toolbars/preview/index.js'), - '@opentiny/tiny-engine-toolbar-generate-vue': path.resolve(__dirname, '../packages/toolbars/generate-vue/index.js'), - '@opentiny/tiny-engine-toolbar-refresh': path.resolve(__dirname, '../packages/toolbars/refresh/index.js'), - '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(__dirname, '../packages/toolbars/redoundo/index.js'), - '@opentiny/tiny-engine-toolbar-clean': path.resolve(__dirname, '../packages/toolbars/clean/index.js'), - '@opentiny/tiny-engine-toolbar-save': path.resolve(__dirname, '../packages/toolbars/save/index.js'), - '@opentiny/tiny-engine-toolbar-setting': path.resolve(__dirname, '../packages/toolbars/setting/index.js'), - '@opentiny/tiny-engine-toolbar-collaboration': path.resolve(__dirname, '../packages/toolbars/collaboration/index.js'), - '@opentiny/tiny-engine-theme-dark': path.resolve(__dirname, '../packages/theme/dark/index.less'), - '@opentiny/tiny-engine-theme-light': path.resolve(__dirname, '../packages/theme/light/index.less'), - '@opentiny/tiny-engine-svgs': path.resolve(__dirname, '../packages/svgs/index.js'), - '@opentiny/tiny-engine-http': path.resolve(__dirname, '../packages/http/src/index.js'), - '@opentiny/tiny-engine-canvas': path.resolve(__dirname, '../packages/canvas/index.js'), - '@opentiny/tiny-engine-utils': path.resolve(__dirname, '../packages/utils/src/index.js'), - '@opentiny/tiny-engine-webcomponent-core': path.resolve(__dirname, '../packages/webcomponent/src/lib.js'), - '@opentiny/tiny-engine-i18n-host': path.resolve(__dirname, '../packages/i18n/src/lib.js'), - '@opentiny/tiny-engine-builtin-component': path.resolve(__dirname, '../packages/builtinComponent/index.js'), - '@opentiny/tiny-engine-entry': path.resolve(__dirname, '../packages/entry/src/index.js'), - '@opentiny/tiny-engine-layout': path.resolve(__dirname, '../packages/layout/index.js'), - '@opentiny/tiny-engine-configurator': path.resolve(__dirname, '../packages/configurator/src/index.js'), - '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(extOptions.VITE_THEME) - ? path.resolve(process.cwd(), `../packages/theme/${extOptions.VITE_THEME}/index.less`) - // ? path.resolve(process.cwd(), `./node_modules/@opentiny/tiny-engine-theme-${extOptions.VITE_THEME}/dist/style.css`) - : '' - } const config = { envDir, publicDir: path.resolve(__dirname, './public'), server: { port: 8090 - }, - resolve: { - alias: devAlias } } - return mergeConfig(defaultConfig, config) + return config }) diff --git a/packages/build/vite-config/index.js b/packages/build/vite-config/index.js index 9c7275d33f..1b9385d6f9 100644 --- a/packages/build/vite-config/index.js +++ b/packages/build/vite-config/index.js @@ -1,2 +1,2 @@ -export { default as getDefaultConfig } from './src/default-config.js' +export { tinyEnginePreset } from './src/default-config.js' export { default as metaCommentsPlugin } from '@opentiny/tiny-engine-vite-plugin-meta-comments' diff --git a/packages/build/vite-config/src/default-config.js b/packages/build/vite-config/src/default-config.js index 64c2f95aab..9f43673916 100644 --- a/packages/build/vite-config/src/default-config.js +++ b/packages/build/vite-config/src/default-config.js @@ -1,4 +1,4 @@ -import { defineConfig } from 'vite' +import { defineConfig, loadEnv, mergeConfig } from 'vite' import path from 'path' import vue from '@vitejs/plugin-vue' import monacoEditorPluginCjs from 'vite-plugin-monaco-editor' @@ -13,6 +13,8 @@ import visualizerCjs from 'rollup-plugin-visualizer' import { fileURLToPath } from 'node:url' import generateComment from '@opentiny/tiny-engine-vite-plugin-meta-comments' import { getBaseUrlFromCli, copyBundleDeps, copyPreviewImportMap, copyLocalImportMap } from './localCdnFile/index.js' +import { devAliasPlugin } from './vite-plugins/devAliasPlugin.js' +import { htmlUpgradeHttpsPlugin } from './vite-plugins/upgradeHttpsPlugin.js' const monacoEditorPlugin = monacoEditorPluginCjs.default const nodeGlobalsPolyfillPlugin = nodeGlobalsPolyfillPluginCjs.default @@ -25,7 +27,7 @@ const __dirname = path.dirname(__filename) const origin = 'http://localhost:9090/' -const config = { +const defaultConfig = { base: './', publicDir: path.resolve(__dirname, './public'), resolve: { @@ -130,133 +132,123 @@ const config = { } } -const importMapVersions = { +const defaultImportMapVersions = { prettier: '2.7.1', vue: '3.4.23', tinyVue: '~3.14' } -export default defineConfig(({ command = 'serve', mode = 'serve' }, extOptions) => { - const { VITE_CDN_DOMAIN = 'https://npm.onmicrosoft.cn', VITE_LOCAL_IMPORT_MAPS, VITE_LOCAL_BUNDLE_DEPS } = extOptions - - const isLocalImportMap = VITE_LOCAL_IMPORT_MAPS === 'true' // true公共依赖库使用本地打包文件，false公共依赖库使用公共CDN - const isCopyBundleDeps = VITE_LOCAL_BUNDLE_DEPS === 'true' // true bundle里的cdn依赖处理成本地依赖， false 不处理 - - const monacoPublicPath = 'editor/monaco-workers' - const monacoEditorPluginInstance = monacoEditorPlugin({ - publicPath: monacoPublicPath, - forceBuildCDN: true, - customDistPath: (_root, outDir, _base) => path.join(outDir, monacoPublicPath) - }) - const htmlPlugin = (mode) => { - const upgradeHttpsMetaTags = [] - const includeHtmls = ['index.html', 'preview.html', 'previewApp.html'] - - if (mode === 'alpha' || mode === 'prod') { - upgradeHttpsMetaTags.push({ - tag: 'meta', - injectTo: 'head-prepend', - attrs: { - 'http-equiv': 'Content-Security-Policy', - content: 'upgrade-insecure-requests' - } - }) - } +export function tinyEnginePreset(engineConfig, userViteConfig) { + const importMapVersions = { + ...defaultImportMapVersions, + ...(engineConfig.importMapVersions || {}) + } - return { - name: 'html-transform', - transformIndexHtml: { - enforce: 'pre', - transform(html, { filename }) { - return { - html, - tags: includeHtmls.includes(path.basename(filename)) ? upgradeHttpsMetaTags : [] - } - } + return defineConfig((...args) => { + const userRealConfig = typeof userViteConfig === 'function' ? userViteConfig(...args) : userViteConfig + + const { command = 'serve', mode = 'serve' } = args[0] + const env = loadEnv(mode, userRealConfig.envDir) + const { VITE_CDN_DOMAIN = 'https://npm.onmicrosoft.cn', VITE_LOCAL_IMPORT_MAPS, VITE_LOCAL_BUNDLE_DEPS } = env + const isLocalImportMap = VITE_LOCAL_IMPORT_MAPS === 'true' // true公共依赖库使用本地打包文件，false公共依赖库使用公共CDN + const isCopyBundleDeps = VITE_LOCAL_BUNDLE_DEPS === 'true' // true bundle里的cdn依赖处理成本地依赖， false 不处理 + const monacoPublicPath = 'editor/monaco-workers' + const monacoEditorPluginInstance = monacoEditorPlugin({ + publicPath: monacoPublicPath, + forceBuildCDN: true, + customDistPath: (_root, outDir, _base) => path.join(outDir, monacoPublicPath) + }) + + if (command === 'serve') { + const devVueAlias = { + find: /^vue$/, + replacement: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser.js` } - } - } - if (command === 'serve') { - const devVueAlias = { - find: /^vue$/, - replacement: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser.js` + defaultConfig.resolve.alias = [...(isLocalImportMap ? [] : [devVueAlias])] + } else { + // command === 'build' + if (mode === 'prod') { + defaultConfig.build.minify = true + defaultConfig.build.sourcemap = false + } } - config.resolve.alias = [...(isLocalImportMap ? [] : [devVueAlias])] - } else { - // command === 'build' - if (mode === 'prod') { - config.build.minify = true - config.build.sourcemap = false + const importmap = { + imports: { + prettier: `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/standalone.mjs`, + 'prettier/': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/`, + 'prettier/parser-typescript': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-typescript.mjs`, + 'prettier/parser-html': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-html.mjs`, + 'prettier/parser-postcss': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-postcss.mjs`, + 'prettier/parser-babel': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-babel.mjs`, + + vue: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser${ + command === 'build' ? '.prod' : '' + }.js`, + '@opentiny/vue': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue.mjs`, + '@opentiny/vue-icon': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-icon.mjs`, + '@opentiny/vue-common': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-common.mjs`, + '@opentiny/vue-locale': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-locale.mjs`, + '@opentiny/vue-design-smb': `${VITE_CDN_DOMAIN}/@opentiny/vue-design-smb@${importMapVersions.tinyVue}/index.js`, + '@opentiny/vue-theme/theme-tool': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme-tool.js`, + '@opentiny/vue-theme/theme': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme/index.js` + } } - } - const importmap = { - imports: { - prettier: `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/standalone.mjs`, - 'prettier/': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/`, - 'prettier/parser-typescript': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-typescript.mjs`, - 'prettier/parser-html': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-html.mjs`, - 'prettier/parser-postcss': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-postcss.mjs`, - 'prettier/parser-babel': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-babel.mjs`, - - vue: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser${ - command === 'build' ? '.prod' : '' - }.js`, - '@opentiny/vue': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue.mjs`, - '@opentiny/vue-icon': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-icon.mjs`, - '@opentiny/vue-common': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-common.mjs`, - '@opentiny/vue-locale': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-locale.mjs`, - '@opentiny/vue-design-smb': `${VITE_CDN_DOMAIN}/@opentiny/vue-design-smb@${importMapVersions.tinyVue}/index.js`, - '@opentiny/vue-theme/theme-tool': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme-tool.js`, - '@opentiny/vue-theme/theme': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme/index.js` + const importMapStyles = [`${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/index.css`] + + const mergedConfig = mergeConfig(defaultConfig, userRealConfig) + + mergedConfig.plugins.push( + createSvgIconsPlugin({ + iconDirs: engineConfig.iconDirs || [], + symbolId: 'icon-[name]', + inject: 'body-last' + }), + monacoEditorPluginInstance, + htmlUpgradeHttpsPlugin(mode), + isLocalImportMap + ? copyLocalImportMap({ + importMap: importmap, + styleUrls: importMapStyles, + originCdnPrefix: VITE_CDN_DOMAIN, + base: getBaseUrlFromCli(mergedConfig.base), + packageCopy: [ + // 这两个包的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 + '@opentiny/vue-theme/theme-tool', + '@opentiny/vue-theme/theme' + ] + }) + : importmapPlugin(importmap, importMapStyles), + isCopyBundleDeps + ? copyBundleDeps({ + bundleFile: 'public/mock/bundle.json', + targetBundleFile: 'mock/bundle.json', + originCdnPrefix: VITE_CDN_DOMAIN, // mock 中bundle的域名当前和环境的VITE_CDN_DOMAIN一致 + base: getBaseUrlFromCli(mergedConfig.base) + }).plugin(command === 'serve') + : [], + isLocalImportMap + ? copyPreviewImportMap({ + // FIXME: 相对路径需要修正 + importMapJson: './src/preview/src/preview/importMap.json', + targetImportMapJson: 'preview-import-map-static/preview-importmap.json', + originCdnPrefix: VITE_CDN_DOMAIN, + base: getBaseUrlFromCli(mergedConfig.base), + packageCopyLib: [ + // 以下的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 + '@vue/devtools-api' + ] + }) + : [] + ) + + // 使用源码调试模式 + if (engineConfig.useSourceAlias) { + mergedConfig.plugins.push(devAliasPlugin(env)) } - } - - const importMapStyles = [`${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/index.css`] - config.plugins.push( - createSvgIconsPlugin({ - iconDirs: extOptions.iconDirs || [], - symbolId: 'icon-[name]', - inject: 'body-last' - }), - monacoEditorPluginInstance, - htmlPlugin(mode), - isLocalImportMap - ? copyLocalImportMap({ - importMap: importmap, - styleUrls: importMapStyles, - originCdnPrefix: VITE_CDN_DOMAIN, - base: getBaseUrlFromCli(config.base), - packageCopy: [ - // 这两个包的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 - '@opentiny/vue-theme/theme-tool', - '@opentiny/vue-theme/theme' - ] - }) - : importmapPlugin(importmap, importMapStyles), - isCopyBundleDeps - ? copyBundleDeps({ - bundleFile: 'public/mock/bundle.json', - targetBundleFile: 'mock/bundle.json', - originCdnPrefix: VITE_CDN_DOMAIN, // mock 中bundle的域名当前和环境的VITE_CDN_DOMAIN一致 - base: getBaseUrlFromCli(config.base) - }).plugin(command === 'serve') - : [], - isLocalImportMap - ? copyPreviewImportMap({ - importMapJson: './src/preview/src/preview/importMap.json', - targetImportMapJson: 'preview-import-map-static/preview-importmap.json', - originCdnPrefix: VITE_CDN_DOMAIN, - base: getBaseUrlFromCli(config.base), - packageCopyLib: [ - // 以下的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 - '@vue/devtools-api' - ] - }) - : [] - ) - return config -}) + return mergedConfig + }) +} diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js new file mode 100644 index 0000000000..59aa0abd83 --- /dev/null +++ b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js @@ -0,0 +1,105 @@ +import path from 'node:path' + +const devAlias = { + '@opentiny/tiny-engine/canvas': path.resolve(process.cwd(), '../packages/design-core/src/canvas/canvas.js'), + '@opentiny/tiny-engine': path.resolve(process.cwd(), '../packages/design-core/index.js'), + '@opentiny/tiny-engine-controller/js': path.resolve(process.cwd(), '../packages/controller/js'), + '@opentiny/tiny-engine-common/component': path.resolve(process.cwd(), '../packages/common/component'), + '@opentiny/tiny-engine-common': path.resolve(process.cwd(), '../packages/common/index.js'), + '@opentiny/tiny-engine-controller/utils': path.resolve(process.cwd(), '../packages/controller/utils.js'), + '@opentiny/tiny-engine-controller/adapter': path.resolve(process.cwd(), '../packages/controller/adapter.js'), + '@opentiny/tiny-engine-controller': path.resolve(process.cwd(), '../packages/controller/src/index.js'), + '@opentiny/tiny-engine-plugin-materials': path.resolve(process.cwd(), '../packages/plugins/materials/index.js'), + '@opentiny/tiny-engine-plugin-block': path.resolve(process.cwd(), '../packages/plugins/block/index.js'), + '@opentiny/tiny-engine-plugin-data': path.resolve(process.cwd(), '../packages/plugins/data/index.js'), + '@opentiny/tiny-engine-plugin-datasource': path.resolve(process.cwd(), '../packages/plugins/datasource/index.js'), + '@opentiny/tiny-engine-plugin-script': path.resolve(process.cwd(), '../packages/plugins/script/index.js'), + '@opentiny/tiny-engine-plugin-tree': path.resolve(process.cwd(), '../packages/plugins/tree/index.js'), + '@opentiny/tiny-engine-plugin-help': path.resolve(process.cwd(), '../packages/plugins/help/index.js'), + '@opentiny/tiny-engine-plugin-schema': path.resolve(process.cwd(), '../packages/plugins/schema/index.js'), + '@opentiny/tiny-engine-plugin-page': path.resolve(process.cwd(), '../packages/plugins/page/index.js'), + '@opentiny/tiny-engine-plugin-i18n': path.resolve(process.cwd(), '../packages/plugins/i18n/index.js'), + '@opentiny/tiny-engine-plugin-bridge': path.resolve(process.cwd(), '../packages/plugins/bridge/index.js'), + '@opentiny/tiny-engine-plugin-tutorial': path.resolve(process.cwd(), '../packages/plugins/tutorial/index.js'), + '@opentiny/tiny-engine-plugin-robot': path.resolve(process.cwd(), '../packages/plugins/robot/index.js'), + '@opentiny/tiny-engine-settings-panel': path.resolve(process.cwd(), '../packages/settings/panel/index.js'), + '@opentiny/tiny-engine-setting-events': path.resolve(process.cwd(), '../packages/settings/events/index.js'), + '@opentiny/tiny-engine-setting-props': path.resolve(process.cwd(), '../packages/settings/props/index.js'), + '@opentiny/tiny-engine-setting-styles': path.resolve(process.cwd(), '../packages/settings/styles/index.js'), + '@opentiny/tiny-engine-toolbar-breadcrumb': path.resolve(process.cwd(), '../packages/toolbars/breadcrumb/index.js'), + '@opentiny/tiny-engine-toolbar-fullscreen': path.resolve(process.cwd(), '../packages/toolbars/fullscreen/index.js'), + '@opentiny/tiny-engine-toolbar-lang': path.resolve(process.cwd(), '../packages/toolbars/lang/index.js'), + '@opentiny/tiny-engine-toolbar-layout': path.resolve(process.cwd(), '../packages/toolbars/layout/index.js'), + '@opentiny/tiny-engine-toolbar-checkinout': path.resolve(process.cwd(), '../packages/toolbars/lock/index.js'), + '@opentiny/tiny-engine-toolbar-logo': path.resolve(process.cwd(), '../packages/toolbars/logo/index.js'), + '@opentiny/tiny-engine-toolbar-logout': path.resolve(process.cwd(), '../packages/toolbars/logout/index.js'), + '@opentiny/tiny-engine-toolbar-media': path.resolve(process.cwd(), '../packages/toolbars/media/index.js'), + '@opentiny/tiny-engine-toolbar-preview': path.resolve(process.cwd(), '../packages/toolbars/preview/index.js'), + '@opentiny/tiny-engine-toolbar-generate-vue': path.resolve( + process.cwd(), + '../packages/toolbars/generate-vue/index.js' + ), + '@opentiny/tiny-engine-toolbar-refresh': path.resolve(process.cwd(), '../packages/toolbars/refresh/index.js'), + '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(process.cwd(), '../packages/toolbars/redoundo/index.js'), + '@opentiny/tiny-engine-toolbar-clean': path.resolve(process.cwd(), '../packages/toolbars/clean/index.js'), + '@opentiny/tiny-engine-toolbar-save': path.resolve(process.cwd(), '../packages/toolbars/save/index.js'), + '@opentiny/tiny-engine-toolbar-setting': path.resolve(process.cwd(), '../packages/toolbars/setting/index.js'), + '@opentiny/tiny-engine-toolbar-collaboration': path.resolve( + process.cwd(), + '../packages/toolbars/collaboration/index.js' + ), + '@opentiny/tiny-engine-theme-dark': path.resolve(process.cwd(), '../packages/theme/dark/index.less'), + '@opentiny/tiny-engine-theme-light': path.resolve(process.cwd(), '../packages/theme/light/index.less'), + '@opentiny/tiny-engine-svgs': path.resolve(process.cwd(), '../packages/svgs/index.js'), + '@opentiny/tiny-engine-http': path.resolve(process.cwd(), '../packages/http/src/index.js'), + '@opentiny/tiny-engine-canvas': path.resolve(process.cwd(), '../packages/canvas/index.js'), + '@opentiny/tiny-engine-utils': path.resolve(process.cwd(), '../packages/utils/src/index.js'), + '@opentiny/tiny-engine-webcomponent-core': path.resolve(process.cwd(), '../packages/webcomponent/src/lib.js'), + '@opentiny/tiny-engine-i18n-host': path.resolve(process.cwd(), '../packages/i18n/src/lib.js'), + '@opentiny/tiny-engine-builtin-component': path.resolve(process.cwd(), '../packages/builtinComponent/index.js'), + '@opentiny/tiny-engine-entry': path.resolve(process.cwd(), '../packages/entry/src/index.js'), + '@opentiny/tiny-engine-layout': path.resolve(process.cwd(), '../packages/layout/index.js'), + '@opentiny/tiny-engine-configurator': path.resolve(process.cwd(), '../packages/configurator/src/index.js') +} + +/** + * 源码调试插件 + * 开启后，会指定 alias 到官方源码 package + * @param {*} env + * @returns + */ +export const devAliasPlugin = (env) => { + return { + name: 'vite-plugin-dev-alias', + config(config, { command }) { + // devAlias 只在 serve 模式下生效 + if (command === 'serve') { + return { + resolve: { + alias: { + ...devAlias, + '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(env.VITE_THEME) + ? path.resolve(process.cwd(), `../packages/theme/${env.VITE_THEME}/index.less`) + : '' + } + } + } + } + + if (command === 'build') { + return { + resolve: { + alias: { + '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(env.VITE_THEME) + ? path.resolve( + process.cwd(), + `./node_modules/@opentiny/tiny-engine-theme-${env.VITE_THEME}/dist/style.css` + ) + : '' + } + } + } + } + } + } +} diff --git a/packages/build/vite-config/src/vite-plugins/upgradeHttpsPlugin.js b/packages/build/vite-config/src/vite-plugins/upgradeHttpsPlugin.js new file mode 100644 index 0000000000..b88b32e627 --- /dev/null +++ b/packages/build/vite-config/src/vite-plugins/upgradeHttpsPlugin.js @@ -0,0 +1,30 @@ +import path from 'node:path' + +export const htmlUpgradeHttpsPlugin = (mode) => { + const upgradeHttpsMetaTags = [] + const includeHtmls = ['index.html', 'preview.html', 'previewApp.html'] + + if (mode === 'alpha' || mode === 'prod') { + upgradeHttpsMetaTags.push({ + tag: 'meta', + injectTo: 'head-prepend', + attrs: { + 'http-equiv': 'Content-Security-Policy', + content: 'upgrade-insecure-requests' + } + }) + } + + return { + name: 'vite-plugin-html-upgrade-https', + transformIndexHtml: { + enforce: 'pre', + transform(html, { filename }) { + return { + html, + tags: includeHtmls.includes(path.basename(filename)) ? upgradeHttpsMetaTags : [] + } + } + } + } +} From 2c9bf4931c47bfbe637ecb089de0af6410d70a5f Mon Sep 17 00:00:00 2001 From: chilingling Date: Tue, 18 Jun 2024 19:01:40 -0700 Subject: [PATCH 2/3] fix: change preset to base config function --- designer-demo/vite.config.js | 25 +- packages/build/vite-config/README.md | 28 ++ packages/build/vite-config/index.js | 2 +- .../build/vite-config/src/default-config.js | 389 +++++++++--------- 4 files changed, 235 insertions(+), 209 deletions(-) create mode 100644 packages/build/vite-config/README.md diff --git a/designer-demo/vite.config.js b/designer-demo/vite.config.js index e079d34b78..996ff90a38 100644 --- a/designer-demo/vite.config.js +++ b/designer-demo/vite.config.js @@ -1,19 +1,24 @@ import path from 'node:path' -import { tinyEnginePreset } from '@opentiny/tiny-engine-vite-config' +import { defineConfig, mergeConfig } from 'vite' +import { useTinyEngineBaseConfig } from '@opentiny/tiny-engine-vite-config' -export default tinyEnginePreset({ - iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')], - useSourceAlias: true -}, () => { - const envDir = path.resolve(process.cwd(), 'env') +export default defineConfig((configEnv) => { + const baseConfig = useTinyEngineBaseConfig({ + viteConfigEnv: configEnv, + root: __dirname, + iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')], + useSourceAlias: true, + envDir: './env' + }) - const config = { - envDir, + + const customConfig = { + envDir: './env', publicDir: path.resolve(__dirname, './public'), server: { port: 8090 } } - - return config + + return mergeConfig(baseConfig, customConfig) }) diff --git a/packages/build/vite-config/README.md b/packages/build/vite-config/README.md new file mode 100644 index 0000000000..591c2c8e06 --- /dev/null +++ b/packages/build/vite-config/README.md @@ -0,0 +1,28 @@ +# tiny-engine-vite-config + +> tiny-engine 构建配置 + + +## useTinyEngineBaseConfig + +基础的 TinyEngine vite 配置。用户基于 cli 创建的模板依赖该基础配置。 + +使用： + +```javascript +const baseConfig = useTinyEngineBaseConfig({ + viteConfigEnv: configEnv, + root: __dirname, + iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')], + useSourceAlias: true, + envDir: './env' +}) +``` + +配置项说明： + +- viteConfigEnv： defineConfig 的入参 +- root：当前项目的根目录，传入 __dirname 或者 process.cwd() +- iconDirs：icon 文件夹目录 +- useSourceAlias：是否开启TinyEngine源码级别的调试 +- envDir：env 文件夹存放的目录，默认值为项目根目录 diff --git a/packages/build/vite-config/index.js b/packages/build/vite-config/index.js index 1b9385d6f9..bfe2779d7c 100644 --- a/packages/build/vite-config/index.js +++ b/packages/build/vite-config/index.js @@ -1,2 +1,2 @@ -export { tinyEnginePreset } from './src/default-config.js' +export { useTinyEngineBaseConfig } from './src/default-config.js' export { default as metaCommentsPlugin } from '@opentiny/tiny-engine-vite-plugin-meta-comments' diff --git a/packages/build/vite-config/src/default-config.js b/packages/build/vite-config/src/default-config.js index 9f43673916..fbdbee1ea8 100644 --- a/packages/build/vite-config/src/default-config.js +++ b/packages/build/vite-config/src/default-config.js @@ -1,4 +1,4 @@ -import { defineConfig, loadEnv, mergeConfig } from 'vite' +import { loadEnv } from 'vite' import path from 'path' import vue from '@vitejs/plugin-vue' import monacoEditorPluginCjs from 'vite-plugin-monaco-editor' @@ -10,7 +10,6 @@ import esbuildCopy from 'esbuild-plugin-copy' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import { importmapPlugin } from './externalDeps.js' import visualizerCjs from 'rollup-plugin-visualizer' -import { fileURLToPath } from 'node:url' import generateComment from '@opentiny/tiny-engine-vite-plugin-meta-comments' import { getBaseUrlFromCli, copyBundleDeps, copyPreviewImportMap, copyLocalImportMap } from './localCdnFile/index.js' import { devAliasPlugin } from './vite-plugins/devAliasPlugin.js' @@ -21,111 +20,111 @@ const nodeGlobalsPolyfillPlugin = nodeGlobalsPolyfillPluginCjs.default const nodeModulesPolyfillPlugin = nodeModulesPolyfillPluginCjs.default const visualizer = visualizerCjs.default -const __filename = fileURLToPath(import.meta.url) - -const __dirname = path.dirname(__filename) - const origin = 'http://localhost:9090/' -const defaultConfig = { - base: './', - publicDir: path.resolve(__dirname, './public'), - resolve: { - extensions: ['.js', '.jsx', '.vue'], - alias: {} - }, - server: { - // 这里保证本地启动服务是localhost,支持js多线程和谷歌浏览器读写本地文件api - port: 8080, - open: '/?type=app&id=918&tenant=1', - proxy: { - '/app-center/v1/api': { - target: origin, - changeOrigin: true - }, - '/app-center/api': { - target: origin, - changeOrigin: true - }, - '/material-center/api': { - target: origin, - changeOrigin: true - }, - '/platform-center/api': { - target: origin, - changeOrigin: true +const getDefaultConfig = (engineConfig) => { + const { root } = engineConfig + + return { + base: './', + publicDir: path.resolve(root, './public'), + resolve: { + extensions: ['.js', '.jsx', '.vue'], + alias: {} + }, + server: { + // 这里保证本地启动服务是localhost,支持js多线程和谷歌浏览器读写本地文件api + port: 8080, + open: '/?type=app&id=918&tenant=1', + proxy: { + '/app-center/v1/api': { + target: origin, + changeOrigin: true + }, + '/app-center/api': { + target: origin, + changeOrigin: true + }, + '/material-center/api': { + target: origin, + changeOrigin: true + }, + '/platform-center/api': { + target: origin, + changeOrigin: true + } } - } - }, - preview: { - host: 'localhost', - port: 8080, - open: false - }, - plugins: [ - generateComment(), - visualizer({ - filename: 'tmp/report.html', - title: 'Bundle Analyzer' - }), - vue({ - reactivityTransform: path.resolve(__dirname, 'src'), - template: { - compilerOptions: { - isCustomElement: (tag) => tag.startsWith('tiny-i18n-host') || tag.startsWith('ng') + }, + preview: { + host: 'localhost', + port: 8080, + open: false + }, + plugins: [ + generateComment(), + visualizer({ + filename: 'tmp/report.html', + title: 'Bundle Analyzer' + }), + vue({ + reactivityTransform: path.resolve(root, 'src'), + template: { + compilerOptions: { + isCustomElement: (tag) => tag.startsWith('tiny-i18n-host') || tag.startsWith('ng') + } } + }), + vueJsx() + ], + optimizeDeps: { + esbuildOptions: { + plugins: [ + nodeGlobalsPolyfillPlugin({ + process: true, + buffer: true + }), + nodeModulesPolyfillPlugin(), + esbuildCopy({ + //@vue/repl monaco编辑器需要 + resolveFrom: 'cwd', + assets: { + from: ['./node_modules/@vue/repl/dist/assets/*'], // worker.js文件以url形式引用不会被esbuild拉起，需要手动复制 + to: ['./node_modules/.vite/assets'] // 开发态，js文件被缓存在.vite/deps，请求相对路径为.vite/assets + }, + watch: true + }) + ] } - }), - vueJsx() - ], - optimizeDeps: { - esbuildOptions: { - plugins: [ - nodeGlobalsPolyfillPlugin({ - process: true, - buffer: true - }), - nodeModulesPolyfillPlugin(), - esbuildCopy({ - //@vue/repl monaco编辑器需要 - resolveFrom: 'cwd', - assets: { - from: ['./node_modules/@vue/repl/dist/assets/*'], // worker.js文件以url形式引用不会被esbuild拉起，需要手动复制 - to: ['./node_modules/.vite/assets'] // 开发态，js文件被缓存在.vite/deps，请求相对路径为.vite/assets - }, - watch: true - }) - ] - } - }, - build: { - commonjsOptions: { - transformMixedEsModules: true, - // monaco-editor 满足 ESM 规范，防止被误转换 - exclude: ['node_modules/*monaco-editor*/**', 'node_modules/lodash-es/**', 'node_modules/@types/lodash-es/**'] }, - minify: true, - sourcemap: false, - rollupOptions: { - plugins: [nodePolyfill({ include: null })], // 使用@rollup/plugin-inject的默认值{include: null}, 即在所有代码中生效 - input: { - index: path.resolve(process.cwd(), './index.html'), - canvas: path.resolve(process.cwd(), './canvas.html'), - preview: path.resolve(process.cwd(), './preview.html') + build: { + commonjsOptions: { + transformMixedEsModules: true, + // monaco-editor 满足 ESM 规范，防止被误转换 + exclude: ['node_modules/*monaco-editor*/**', 'node_modules/lodash-es/**', 'node_modules/@types/lodash-es/**'] }, - output: { - manualChunks: (id) => { - const chunksMap = { - monaco: ['node_modules/monaco-editor'], - prettier: ['node_modules/prettier'], - vendor: ['node_modules'] - } - for (const [chunkName, sourcePaths] of Object.entries(chunksMap)) { - if (sourcePaths.some((item) => id.indexOf(item) > -1)) { - return chunkName + minify: true, + sourcemap: false, + rollupOptions: { + plugins: [nodePolyfill({ include: null })], // 使用@rollup/plugin-inject的默认值{include: null}, 即在所有代码中生效 + input: { + index: path.resolve(process.cwd(), './index.html'), + canvas: path.resolve(process.cwd(), './canvas.html'), + preview: path.resolve(process.cwd(), './preview.html') + }, + output: { + manualChunks: (id) => { + const chunksMap = { + monaco: ['node_modules/monaco-editor'], + prettier: ['node_modules/prettier'], + vendor: ['node_modules'] + } + for (const [chunkName, sourcePaths] of Object.entries(chunksMap)) { + if (sourcePaths.some((item) => id.indexOf(item) > -1)) { + return chunkName + } } + return undefined } - return undefined } } } @@ -138,117 +137,111 @@ const defaultImportMapVersions = { tinyVue: '~3.14' } -export function tinyEnginePreset(engineConfig, userViteConfig) { +export function useTinyEngineBaseConfig(engineConfig) { const importMapVersions = { ...defaultImportMapVersions, ...(engineConfig.importMapVersions || {}) } + const { envDir = '', viteConfigEnv } = engineConfig + const { command = 'serve', mode = 'serve' } = viteConfigEnv + const env = loadEnv(mode, envDir) + const { VITE_CDN_DOMAIN = 'https://npm.onmicrosoft.cn', VITE_LOCAL_IMPORT_MAPS, VITE_LOCAL_BUNDLE_DEPS } = env + const isLocalImportMap = VITE_LOCAL_IMPORT_MAPS === 'true' // true公共依赖库使用本地打包文件，false公共依赖库使用公共CDN + const isCopyBundleDeps = VITE_LOCAL_BUNDLE_DEPS === 'true' // true bundle里的cdn依赖处理成本地依赖， false 不处理 + const monacoPublicPath = 'editor/monaco-workers' + const monacoEditorPluginInstance = monacoEditorPlugin({ + publicPath: monacoPublicPath, + forceBuildCDN: true, + customDistPath: (_root, outDir, _base) => path.join(outDir, monacoPublicPath) + }) + const config = getDefaultConfig(engineConfig) - return defineConfig((...args) => { - const userRealConfig = typeof userViteConfig === 'function' ? userViteConfig(...args) : userViteConfig - - const { command = 'serve', mode = 'serve' } = args[0] - const env = loadEnv(mode, userRealConfig.envDir) - const { VITE_CDN_DOMAIN = 'https://npm.onmicrosoft.cn', VITE_LOCAL_IMPORT_MAPS, VITE_LOCAL_BUNDLE_DEPS } = env - const isLocalImportMap = VITE_LOCAL_IMPORT_MAPS === 'true' // true公共依赖库使用本地打包文件，false公共依赖库使用公共CDN - const isCopyBundleDeps = VITE_LOCAL_BUNDLE_DEPS === 'true' // true bundle里的cdn依赖处理成本地依赖， false 不处理 - const monacoPublicPath = 'editor/monaco-workers' - const monacoEditorPluginInstance = monacoEditorPlugin({ - publicPath: monacoPublicPath, - forceBuildCDN: true, - customDistPath: (_root, outDir, _base) => path.join(outDir, monacoPublicPath) - }) - - if (command === 'serve') { - const devVueAlias = { - find: /^vue$/, - replacement: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser.js` - } - - defaultConfig.resolve.alias = [...(isLocalImportMap ? [] : [devVueAlias])] - } else { - // command === 'build' - if (mode === 'prod') { - defaultConfig.build.minify = true - defaultConfig.build.sourcemap = false - } + if (command === 'serve') { + const devVueAlias = { + find: /^vue$/, + replacement: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser.js` } - const importmap = { - imports: { - prettier: `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/standalone.mjs`, - 'prettier/': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/`, - 'prettier/parser-typescript': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-typescript.mjs`, - 'prettier/parser-html': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-html.mjs`, - 'prettier/parser-postcss': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-postcss.mjs`, - 'prettier/parser-babel': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-babel.mjs`, - - vue: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser${ - command === 'build' ? '.prod' : '' - }.js`, - '@opentiny/vue': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue.mjs`, - '@opentiny/vue-icon': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-icon.mjs`, - '@opentiny/vue-common': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-common.mjs`, - '@opentiny/vue-locale': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-locale.mjs`, - '@opentiny/vue-design-smb': `${VITE_CDN_DOMAIN}/@opentiny/vue-design-smb@${importMapVersions.tinyVue}/index.js`, - '@opentiny/vue-theme/theme-tool': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme-tool.js`, - '@opentiny/vue-theme/theme': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme/index.js` - } + config.resolve.alias = [...(isLocalImportMap ? [] : [devVueAlias])] + } else { + // command === 'build' + if (mode === 'prod') { + config.build.minify = true + config.build.sourcemap = false } + } - const importMapStyles = [`${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/index.css`] + const importmap = { + imports: { + prettier: `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/standalone.mjs`, + 'prettier/': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/`, + 'prettier/parser-typescript': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-typescript.mjs`, + 'prettier/parser-html': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-html.mjs`, + 'prettier/parser-postcss': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-postcss.mjs`, + 'prettier/parser-babel': `${VITE_CDN_DOMAIN}/prettier@${importMapVersions.prettier}/esm/parser-babel.mjs`, + + vue: `${VITE_CDN_DOMAIN}/vue@${importMapVersions.vue}/dist/vue.runtime.esm-browser${ + command === 'build' ? '.prod' : '' + }.js`, + '@opentiny/vue': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue.mjs`, + '@opentiny/vue-icon': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-icon.mjs`, + '@opentiny/vue-common': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-common.mjs`, + '@opentiny/vue-locale': `${VITE_CDN_DOMAIN}/@opentiny/vue@${importMapVersions.tinyVue}/runtime/tiny-vue-locale.mjs`, + '@opentiny/vue-design-smb': `${VITE_CDN_DOMAIN}/@opentiny/vue-design-smb@${importMapVersions.tinyVue}/index.js`, + '@opentiny/vue-theme/theme-tool': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme-tool.js`, + '@opentiny/vue-theme/theme': `${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/theme/index.js` + } + } - const mergedConfig = mergeConfig(defaultConfig, userRealConfig) + const importMapStyles = [`${VITE_CDN_DOMAIN}/@opentiny/vue-theme@${importMapVersions.tinyVue}/index.css`] - mergedConfig.plugins.push( - createSvgIconsPlugin({ - iconDirs: engineConfig.iconDirs || [], - symbolId: 'icon-[name]', - inject: 'body-last' - }), - monacoEditorPluginInstance, - htmlUpgradeHttpsPlugin(mode), - isLocalImportMap - ? copyLocalImportMap({ - importMap: importmap, - styleUrls: importMapStyles, - originCdnPrefix: VITE_CDN_DOMAIN, - base: getBaseUrlFromCli(mergedConfig.base), - packageCopy: [ - // 这两个包的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 - '@opentiny/vue-theme/theme-tool', - '@opentiny/vue-theme/theme' - ] - }) - : importmapPlugin(importmap, importMapStyles), - isCopyBundleDeps - ? copyBundleDeps({ - bundleFile: 'public/mock/bundle.json', - targetBundleFile: 'mock/bundle.json', - originCdnPrefix: VITE_CDN_DOMAIN, // mock 中bundle的域名当前和环境的VITE_CDN_DOMAIN一致 - base: getBaseUrlFromCli(mergedConfig.base) - }).plugin(command === 'serve') - : [], - isLocalImportMap - ? copyPreviewImportMap({ - // FIXME: 相对路径需要修正 - importMapJson: './src/preview/src/preview/importMap.json', - targetImportMapJson: 'preview-import-map-static/preview-importmap.json', - originCdnPrefix: VITE_CDN_DOMAIN, - base: getBaseUrlFromCli(mergedConfig.base), - packageCopyLib: [ - // 以下的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 - '@vue/devtools-api' - ] - }) - : [] - ) + config.plugins.push( + createSvgIconsPlugin({ + iconDirs: engineConfig.iconDirs || [], + symbolId: 'icon-[name]', + inject: 'body-last' + }), + monacoEditorPluginInstance, + htmlUpgradeHttpsPlugin(mode), + isLocalImportMap + ? copyLocalImportMap({ + importMap: importmap, + styleUrls: importMapStyles, + originCdnPrefix: VITE_CDN_DOMAIN, + base: getBaseUrlFromCli(config.base), + packageCopy: [ + // 这两个包的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 + '@opentiny/vue-theme/theme-tool', + '@opentiny/vue-theme/theme' + ] + }) + : importmapPlugin(importmap, importMapStyles), + isCopyBundleDeps + ? copyBundleDeps({ + bundleFile: 'public/mock/bundle.json', + targetBundleFile: 'mock/bundle.json', + originCdnPrefix: VITE_CDN_DOMAIN, // mock 中bundle的域名当前和环境的VITE_CDN_DOMAIN一致 + base: getBaseUrlFromCli(config.base) + }).plugin(command === 'serve') + : [], + isLocalImportMap + ? copyPreviewImportMap({ + // FIXME: 相对路径需要修正 + importMapJson: './src/preview/src/preview/importMap.json', + targetImportMapJson: 'preview-import-map-static/preview-importmap.json', + originCdnPrefix: VITE_CDN_DOMAIN, + base: getBaseUrlFromCli(config.base), + packageCopyLib: [ + // 以下的js存在相对路径引用，不能单独拷贝一个文件，需要整个包拷贝 + '@vue/devtools-api' + ] + }) + : [] + ) - // 使用源码调试模式 - if (engineConfig.useSourceAlias) { - mergedConfig.plugins.push(devAliasPlugin(env)) - } + if (engineConfig.useSourceAlias) { + config.plugins.push(devAliasPlugin(env)) + } - return mergedConfig - }) + return config } From e1ababf77914956a459511ce34054a6fdeaf325f Mon Sep 17 00:00:00 2001 From: chilingling Date: Fri, 28 Jun 2024 00:18:23 -0700 Subject: [PATCH 3/3] fix: sync change to template --- packages/build/vite-config/README.md | 1 - .../template/designer/vite.config.js | 34 ++++++------------- 2 files changed, 11 insertions(+), 24 deletions(-) diff --git a/packages/build/vite-config/README.md b/packages/build/vite-config/README.md index 591c2c8e06..52226bef12 100644 --- a/packages/build/vite-config/README.md +++ b/packages/build/vite-config/README.md @@ -2,7 +2,6 @@ > tiny-engine 构建配置 - ## useTinyEngineBaseConfig 基础的 TinyEngine vite 配置。用户基于 cli 创建的模板依赖该基础配置。 diff --git a/packages/engine-cli/template/designer/vite.config.js b/packages/engine-cli/template/designer/vite.config.js index 9bb4a69c73..504b2f57cd 100644 --- a/packages/engine-cli/template/designer/vite.config.js +++ b/packages/engine-cli/template/designer/vite.config.js @@ -1,34 +1,22 @@ import path from 'node:path' -import { defineConfig, mergeConfig, loadEnv } from 'vite' -import { getDefaultConfig } from '@opentiny/tiny-engine-vite-config' +import { defineConfig, mergeConfig } from 'vite' +import { useTinyEngineBaseConfig } from '@opentiny/tiny-engine-vite-config' -export default defineConfig((options) => { - const envDir = path.resolve(process.cwd(), 'env') - const extOptions = { - ...loadEnv(options.mode, envDir, 'VITE_'), - iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')] - } - const defaultConfig = getDefaultConfig(options, extOptions) - - const devAlias = { - '@opentiny/tiny-engine-theme': ['light', 'dark'].includes(extOptions.VITE_THEME) - ? path.resolve( - process.cwd(), - `./node_modules/@opentiny/tiny-engine-theme-${extOptions.VITE_THEME}/dist/style.css` - ) - : '' - } +export default defineConfig((configEnv) => { + const baseConfig = useTinyEngineBaseConfig({ + viteConfigEnv: configEnv, + root: __dirname, + iconDirs: [path.resolve(__dirname, './node_modules/@opentiny/tiny-engine/assets/')], + envDir: './env' + }) const config = { - envDir, + envDir: './env', publicDir: path.resolve(__dirname, './public'), server: { port: 8090 - }, - resolve: { - alias: devAlias } } - return mergeConfig(defaultConfig, config) + return mergeConfig(baseConfig, config) })