feat: 构架打包流程，进行分包处理

.gitignore

@@ -23,7 +23,6 @@ Desktop.ini
 
 # 忽略 maven 和 gradle 的相关文件
 target/
-build/
 pom.xml.tag
 pom.xml.releaseBackup
 pom.xml.next

package.json

@@ -8,17 +8,24 @@
     "docs:dev": "pnpm --filter @breeze-ui/docs dev",
     "docs:build": "pnpm --filter @breeze-ui/docs build",
     "storybook": "pnpm --filter @breeze-ui/play storybook",
-    "test": "pnpm --filter @breeze-ui/components test"
+    "test": "pnpm --filter @breeze-ui/components test",
+    "build": "pnpm --filter breeze-ui build"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@popperjs/core": "^2.11.8",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.20",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/tsconfig": "^0.5.1",
+    "async-validator": "^4.2.5",
+    "move-file-cli": "3.0.0",
+    "npm-run-all": "^4.1.5",
+    "release-it": "^18.1.2",
+    "rimraf": "^6.0.1",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
     "vitest": "^1.4.0",

packages/components/Button/Button.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { throttle } from "lodash-es"
+import BreIcon from "../Icon/Icon.vue"
 import {computed, ref, inject} from "vue"
 import { BUTTON_GROUP_CTX_KEY } from "./const.ts"
 import type { ButtonProps, ButtonEmits, ButtonInstance } from "./interface.ts"
-import { throttle } from "lodash-es";
-import BreIcon from "../Icon/Icon.vue"
 
 defineOptions({
   name: "bre-button"
@@ -72,6 +72,6 @@ defineExpose<ButtonInstance>({
   </component>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 @import "./style.scss";
 </style>

packages/components/Button/ButtonGroup.vue

@@ -4,7 +4,7 @@ import type { ButtonGroupProps } from "./interface.ts"
 import { BUTTON_GROUP_CTX_KEY } from "./const.ts"
 
 defineOptions({
-  name: "BreButtonGroup",
+  name: "bre-button-group",
 })
 
 const props = defineProps<ButtonGroupProps>()
@@ -22,6 +22,6 @@ provide(BUTTON_GROUP_CTX_KEY, reactive({
   </div>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+@import "./style.scss";
 </style>

packages/components/Icon/Icon.vue

@@ -5,7 +5,7 @@ import { omit } from "lodash-es"
 import { computed } from "vue";
 
 defineOptions({
-  name: "BreIcon",
+  name: "bre-icon",
   inheritAttrs: false,
 })
 

packages/components/package.json

@@ -13,9 +13,5 @@
     "@vitest/coverage-v8": "^1.4.0",
     "@vue/test-utils": "^2.4.5",
     "jsdom": "^24.0.0"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.11.8",
-    "async-validator": "^4.2.5"
   }
 }

packages/core/build/vite.es.config.ts

@@ -0,0 +1,66 @@
+import { defineConfig } from 'vite'
+import vue from "@vitejs/plugin-vue"
+import { resolve } from "path"
+import dts from 'vite-plugin-dts'
+import { filter, map } from "lodash-es"
+import {readdirSync} from "node:fs";
+
+function getDirectoriesSync(basePath: string) {
+    const entries = readdirSync(basePath, { withFileTypes: true })
+
+    return map(
+        filter(entries, (entry) => entry.isDirectory()),
+        (entry) => entry.name
+    )
+}
+
+export default defineConfig({
+    plugins: [vue(), dts({
+        tsconfigPath: "../../tsconfig.build.json",
+        outDir: "./dist/types"
+    }) as any],
+    build: {
+        outDir: './dist/es',
+        lib: {
+            entry: resolve(__dirname, "../index.ts"),
+            name: "BreezeUi",
+            fileName: "index",
+            formats: ["es"]
+        },
+        rollupOptions: {
+            external: [
+                "vue",
+                "@fortawesome/fontawesome-svg-core",
+                "@fortawesome/free-solid-svg-icons",
+                "@fortawesome/vue-fontawesome",
+                "@popperjs/core",
+                "async-validator",
+            ],
+            output: {
+                assetFileNames: (assetInfo) => {
+                    if (assetInfo.name === "style.css") {
+                        return "index.css"
+                    }
+                    return assetInfo.name as string
+                },
+                manualChunks(id) {
+                    if (id.includes("node_modules")) {
+                        return "vendor"
+                    }
+                    if(id.includes("packages/hooks")) {
+                        return "hooks"
+                    }
+                    if(id.includes("packages/utils") || id.includes("plugin-vue:export-helper")) {
+                        return "utils"
+                    }
+                    // 按组件分包
+                    for(const item of getDirectoriesSync("../components")) {
+                        if(id.includes(`/packages/components/${item}`)) {
+                            return item
+                        }
+                    }
+                }
+            },
+        }
+    },
+})

packages/core/build/vite.umd.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import vue from "@vitejs/plugin-vue"
+import { resolve } from "path"
+
+export default defineConfig({
+    plugins: [vue()],
+    build: {
+        outDir: './dist/umd',
+        lib: {
+            entry: resolve(__dirname, "../index.ts"),
+            name: "BreezeUi",
+            fileName: "index",
+            formats: ["umd"]
+        },
+        rollupOptions: {
+            external: ["vue"],
+            output: {
+                exports: "named",
+                globals: {
+                    vue: "Vue"
+                },
+                assetFileNames: (assetInfo) => {
+                    if (assetInfo.name === "style.css") {
+                        return "index.css"
+                    }
+                    return assetInfo.name as string
+                }
+            }
+        }
+    },
+})

packages/core/index.ts

@@ -7,5 +7,5 @@ import { fas } from "@fortawesome/free-solid-svg-icons"
 library.add(fas)
 const installer = makeInstaller(components);
 
-export * from "@breeze-ui/components";
+export * from "../components";
 export default installer;

packages/core/package.json

@@ -1,15 +1,53 @@
 {
   "name": "breeze-ui",
   "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "description": "Components library for Breeze UI",
+  "type": "module",
+  "files": ["dist"],
+  "sideEffects": ["./dist/index.css"],
+  "main": "./dist/umd/index.umd.cjs",
+  "module": "./dist/es/index.js",
+  "types": "./dist/types/core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/core/index.d.ts",
+      "import": "./dist/es/index.js",
+      "require": "./dist/umd/index.umd.cjs"
+    },
+    "./dist": {
+      "import": "./dist/",
+      "require": "./dist/"
+    },
+    "./dist/index.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
+    }
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "run-s clean build-only move-style",
+    "build-only": "run-p build-esm build-umd",
+    "build-umd": "vite build --config ./build/vite.umd.config.ts",
+    "build-esm": "vite build --config ./build/vite.es.config.ts",
+    "move-style": "move-file dist/es/index.css dist/index.css",
+    "clean": "rimraf dist",
+    "release": "release-it"
   },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@popperjs/core": "^2.11.8",
+    "async-validator": "^4.2.5"
+  },
+  "devDependencies": {
+    "vite-plugin-dts": "^3.9.1",
     "@breeze-ui/components": "workspace:*"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
+  "peerDependencies": {
+    "vue": "^3.4.19"
+  }
 }

packages/play/src/App.vue

@@ -2,8 +2,7 @@
 </script>
 
 <template>
-  <bre-button icon="search" type="primary" size="large">按钮</bre-button>
-  <BreIcon name="search" icon="spinner" spin  />
+  <bre-button icon="plus" type="primary" size="large">按钮</bre-button>
 </template>
 
 <style scoped>

packages/play/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import BreezeUi from "breeze-ui"
+import  BreezeUi from "breeze-ui"
+import "breeze-ui/dist/index.css"
 
 createApp(App).use(BreezeUi).mount('#app')