feat: 组件打包

package.json

@@ -50,6 +50,7 @@
     "unplugin-auto-import": "^0.17.5",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.2.9",
+    "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.5.0",
     "vue": "^3.4.25",
     "vue-tsc": "^2.0.6"

packages/element-plus/input/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from 'element-plus/es/utils'
+import { withInstall } from 'element-plus/es/utils/index'
 
 import Input from './src/input.vue'
 

packages/element-plus/package.json

@@ -7,12 +7,23 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    }
+      "types": "./es/index.d.ts",
+      "import": "./es/index.mjs",
+      "require": "./lib/index.js"
+    },
+    "./es": {
+      "types": "./es/index.d.ts",
+      "import": "./es/index.mjs"
+    },
+    "./lib": {
+      "types": "./lib/index.d.ts",
+      "require": "./lib/index.js"
+    },
+    "./*": "./*"
   },
-  "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.js",
+  "main": "./lib/index.js",
+  "module": "./es/index.mjs",
+  "types": "./es/index.d.ts",
   "files": ["dist"],
   "scripts": {
     "build": "vite build"

packages/element-plus/vite.config.ts

@@ -1,29 +1,56 @@
 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: '/play/',
   plugins: [
     Vue(),
+    dts({
+      entryRoot: './',
+      outDir: ['dist/es', 'dist/lib'],
+      // 指定使用的tsconfig.json为我们整个项目根目录下,如果不配置,你也可以在components下新建tsconfig.json
+      tsconfigPath: '../../tsconfig.json',
+    }),
   ],
   build: {
+    minify: false,
     emptyOutDir: true,
     lib: {
       entry: resolve(__dirname, './index.ts'),
-      name: 'index',
-      fileName: 'index',
     },
     rollupOptions: {
       // 确保外部化处理那些你不想打包进库的依赖
       external: ['vue'],
-      output: {
-        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
-        globals: {
-          vue: 'Vue',
+      output: [
+        {
+          // 打包格式
+          format: 'es',
+          // 打包后文件名
+          entryFileNames: '[name].mjs',
+          // 让打包目录和我们目录对应
+          preserveModules: true,
+          exports: 'named',
+          // 打包结果目录
+          dir: 'dist/es',
+          // 打包当前目录
+          preserveModulesRoot: '',
         },
-      },
+        {
+          // 打包格式
+          format: 'cjs',
+          // 打包后文件名
+          entryFileNames: '[name].js',
+          // 让打包目录和我们目录对应
+          preserveModules: true,
+          exports: 'named',
+          // 打包结果目录
+          dir: 'dist/lib',
+          // 打包当前目录
+          preserveModulesRoot: '',
+        },
+      ],
     },
   },
 })

playground/src/App.vue

@@ -1,7 +1,8 @@
+<!-- eslint-disable no-console -->
 <script setup lang="ts">
 import { EFInput } from '@nigi-element-formily/element-plus'
 
-// console.log(EFInput)
+console.log(EFInput)
 </script>
 
 <template>