# v-resize-sun

> - 监听dom的宽高变化 - 如何用vite打包库 - 如何发布npm

Latest version **0.0.1** (published 2023-07-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install v-resize-sun
pnpm add v-resize-sun
yarn add v-resize-sun
bun add v-resize-sun
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-07-17 |
| First published | 2023-07-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sunwq |

## Links

- npm: https://www.npmjs.com/package/v-resize-sun
- npm.io page: https://npm.io/package/v-resize-sun

## Recent versions

- 0.0.1 (latest) — 2023-07-17

## README

# npm库的发布流程
 - 监听dom的宽高变化
 - 如何用vite打包库
 - 如何发布npm

## 1.配置vite进行打包

```ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'useResize',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          useResize: 'useResize',
        },
      },
    }
  }
})
```

更多的配置选项可以参考vite官网[构建生产版本 | Vite 官方中文文档 (vitejs.dev)](https://cn.vitejs.dev/guide/build.html)

在package.json中配置build命令

```json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "vite build"
  },
```

运行 npm run build  打包出dist目录

## 2.发布npm

配置package.json

```json
 // 使用require的时候会去找main 
"main": "dist/publishnpm.umd.js",

// 使用import的时候会去找对应的module
  "module": "dist/publishnpm.mjs",

//  要发布到npm上的文件
"files": ["dist","index.d.ts"],
```

---
_Source: https://npm.io/package/v-resize-sun · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._