diff --git a/packages/create-cocos-plugin/templates/vue-ts/src/panels/panel2.ts b/packages/create-cocos-plugin/templates/vue-ts/src/panels/panel2.ts index 76627fc..06b1869 100644 --- a/packages/create-cocos-plugin/templates/vue-ts/src/panels/panel2.ts +++ b/packages/create-cocos-plugin/templates/vue-ts/src/panels/panel2.ts @@ -1,5 +1,5 @@ import './style.css'; -// import './panel2.css'; +import './panel2.css'; export default Editor.Panel.define({ template: '
', // 只留一个 div 用于 vue 的挂载 diff --git a/packages/create-cocos-plugin/templates/vue-ts/rollup-plugin-cocos-panel.ts b/packages/create-cocos-plugin/templates/vue-ts/vite-plugin-cocos-panel.ts similarity index 92% rename from packages/create-cocos-plugin/templates/vue-ts/rollup-plugin-cocos-panel.ts rename to packages/create-cocos-plugin/templates/vue-ts/vite-plugin-cocos-panel.ts index b583e40..bb19823 100644 --- a/packages/create-cocos-plugin/templates/vue-ts/rollup-plugin-cocos-panel.ts +++ b/packages/create-cocos-plugin/templates/vue-ts/vite-plugin-cocos-panel.ts @@ -5,11 +5,28 @@ import { walk } from 'estree-walker'; // walk ast import { generate } from 'astring'; // ast to code import { extname, basename } from 'node:path'; -export default function (): Plugin { +export function cocosPanelConfig(): Plugin { + return { + name: 'cocos-panel-config', + version: '0.0.1', + apply: 'build', + enforce: 'pre', + + config() { + return { + build: { + cssCodeSplit: true, // 重要:按每个 panel 入口拆分 css,下面的插件将依据这个特性将对应的 css 塞到 panel 的 style 去。 + }, + }; + }, + }; +} + +export function cocosPanelCss(): Plugin { const styleMap: { [k: string]: string } = {}; return { - name: 'cocos-panel', + name: 'cocos-panel-css', version: '0.0.1', apply: 'build', enforce: 'post', @@ -25,7 +42,7 @@ export default function (): Plugin { const css_chunk = bundle[css_key]; // 注意:只有当某个 js 入口文件具备自己的 css 样式时,它才会有对应的 css 入口 - // 如果某个 js 只导入了公共 css,是不会有样式的。这点算是一点点限制,但是不会影响具体业务 + // 如果某个 js 只导入了公共 css,是不会有样式的。 if (css_chunk?.type === 'asset' && css_chunk.fileName.includes('.css')) { styleMap[key] = '\n' + css_chunk.source; delete bundle[css_key]; diff --git a/packages/create-cocos-plugin/templates/vue-ts/vite.config.ts b/packages/create-cocos-plugin/templates/vue-ts/vite.config.ts index 9b2d33d..7c86a62 100644 --- a/packages/create-cocos-plugin/templates/vue-ts/vite.config.ts +++ b/packages/create-cocos-plugin/templates/vue-ts/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vite'; import { nodeExternals } from 'rollup-plugin-node-externals'; import vue from '@vitejs/plugin-vue'; -import cocosPanel from './rollup-plugin-cocos-panel'; +import { cocosPanelConfig, cocosPanelCss } from './vite-plugin-cocos-panel'; export default defineConfig(({ mode }) => { /** @@ -14,13 +14,12 @@ export default defineConfig(({ mode }) => { const isDev = mode === 'development'; return { - base: './', build: { lib: { entry: { browser: './src/browser/index.ts', - panel_1: './src/panels/panel1.ts', - panel_2: './src/panels/panel2.ts', + panel1: './src/panels/panel1.ts', + panel2: './src/panels/panel2.ts', }, formats: ['cjs'], fileName: (format, entryName) => `${entryName}.${format}`, @@ -30,21 +29,7 @@ export default defineConfig(({ mode }) => { include: ['./src/**/*.ts', './src/**/*.vue', './src/**/*.css'], } : null, - rollupOptions: { - output: { - assetFileNames: '[name].[ext]', // 让 css 文件的命名固定,不要携带 hash - // manualChunks(id) { - // if (/\.css$/.test(id)) { - // return id; - // } - // }, - }, - }, target: 'esnext', - assetsDir: './', // 直接把所有文件都放 dist - cssCodeSplit: true, // 因为是多个入口,所以 css 也应该独立 - emptyOutDir: true, - outDir: 'dist', minify: false, }, plugins: [ @@ -58,11 +43,12 @@ export default defineConfig(({ mode }) => { nodeExternals({ builtins: true, // 排除 node 的内置模块 deps: true, - devDeps: false, - peerDeps: false, - optDeps: false, + devDeps: true, + peerDeps: true, + optDeps: true, }), - cocosPanel(), + cocosPanelConfig(), + cocosPanelCss(), ], }; });