npm库的发布流程

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

1.配置vite进行打包

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)

在package.json中配置build命令

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

运行 npm run build 打包出dist目录

2.发布npm

配置package.json

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

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

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