package

README.md

@@ -3,7 +3,10 @@
 简单的vue3瀑布流组件，通过vue调整元素样式而非直接进行dom操作以获得最好的兼容性。
 
 ## 安装
-我没传 npm ，理论上我会打个包放到 github release 里，如果没有那就下载或 git clone 这个仓库然后自己 `npm i` 、 `npm run build` 吧。
+
+```cmd
+npm i vue-waterfall-mini
+```
 
 ## 使用例
 

index.cjs

@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = require('./dist/vue-waterfall-mini.cjs.js')

index.js

@@ -0,0 +1 @@
+export { Waterfall } from "./dist/vue-waterfall-mini.esm"

package.json

@@ -1,13 +1,32 @@
 {
   "name": "vue-waterfall-mini",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": {
     "name": "Dave_12138",
     "email": "[email protected]",
     "url": "https://dave-12138.cn"
   },
-  "private": true,
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Dave-12138/vue-waterfall-mini"
+  },
+  "files": [
+    "dist",
+    "index.js",
+    "index.cjs"
+  ],
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./style": "./dist/style.css",
+    "./style.css": "./dist/style.css"
+  },
+  "main": "index.cjs",
+  "module": "index.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",

src/App.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { defineAsyncComponent, reactive, } from 'vue';
+import { reactive, } from 'vue';
 import { Waterfall } from './main';
 import BSInput from './components/BSInput.vue';
-import { json } from 'stream/consumers';
 const c = Array.from<string>("0123456789ABCDEF")
 const d = () => c[(c.length * Math.random()) | 0]
 const _createItem = () => ({ id: crypto.randomUUID(), h: 3 + (Math.random() * 30) | 0, c: '#' + d() + d() + d() });

tsconfig.json

@@ -1,11 +1,24 @@
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    },
-    {
-      "path": "./tsconfig.app.json"
-    }
-  ]
+  "include": ["env.d.ts", "src/**/main.ts", "src/**/Waterfall.vue"],
+  "exclude": ["src/components/BSInput.vue","src/App.vue"],
+  "compilerOptions": {
+    "types": ["vitest/importMeta"],
+    "baseUrl": ".",
+    "declaration": true,
+    "outDir": "dist",
+    "module": "ESNext",
+    "target": "es2016",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "declarationDir": "dist/types",
+    "emitDeclarationOnly": true
+  }
 }

vite.config.ts

@@ -2,20 +2,19 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { BuildOptions, defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-const target = process.env.TARGET;
 const build: BuildOptions = {
   target: "modules",
   lib: {
-    formats: ['es'],
+    formats: ['es', 'cjs'],
     entry: "./src/main.ts",
     name: "vue-waterfall-mini",
-    fileName: () => 'vue-waterfall-mini.esm.js'
+    fileName: (t) => `vue-waterfall-mini.${t === 'es' ? 'esm' : t}.js`
   },
   rollupOptions: {
-    external: ['vue']
+    external: ['vue'],
   }
 }
-if (target !== 'lib') {
+if (process.env.TARGET !== 'lib') {
   build.lib = false;
   build.outDir = 'pages';
   build.rollupOptions = void 0;