vite plugin done

cocos-creator · Sep 23, 2024 · 3e14f94 · 3e14f94
1 parent 7678ca3
commit 3e14f94
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 26 deletions.
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
@@ -1,5 +1,5 @@
 import './style.css';
-// import './panel2.css';
+import './panel2.css';
 
 export default Editor.Panel.define({
     template: '<div id="app"></div>', // 只留一个 div 用于 vue 的挂载

diff --git a/...lates/vue-ts/rollup-plugin-cocos-panel.ts → ...mplates/vue-ts/vite-plugin-cocos-panel.ts b/...lates/vue-ts/rollup-plugin-cocos-panel.ts → ...mplates/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
@@ -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(),
         ],
     };
 });