发布npm注意事项

1、关于vue配置，下面以vite配置为主

 注意事项

主要注意关于rollupOptions的配置
rollupOptions: {
    external: ['vue'],
    output: {
         globals: { vue: 'Vue' }
    }
}

external: ['vue'] — 声明 “外部依赖”，不打包进产物【重要：否则会将vue打包进入组件】
作用：告诉 Vite：“vue 是一个外部依赖，你打包时不用把它的代码放进我的项目 bundle（打包文件）里，我会自己在运行时提供这个依赖”。

output.globals: { vue: 'Vue' } — 映射外部依赖的全局变量名
作用：告诉 Vite：“当我代码里导入 vue 时，运行时请从全局变量 Vue 中获取 vue 的实例”。
               

2、关于package.json的配置

 注意事项

其中main和module可以不写

main表示：es6 写法引入的模块

module表示：common.js 规范 node的引入规范

exports很重要

其中“.”或 “./collect-btn”或“./my-collect-btn”为组件入口，也就是引入组件时程序读取的入口

import和require表示：导入模块的方式，类型与main和module【mian和module老用法】

导入方式
{
  "exports": {
    ".": {
      // 浏览器环境
      "browser": "./dist/index.browser.js",
      // Node.js 环境  
      "node": "./dist/index.node.js",
      // 开发环境
      "development": "./dist/index.dev.js",
      // 生产环境
      "production": "./dist/index.prod.js",
      // 默认回退
      "default": "./dist/index.js"
    }
  }
}

{
  "exports": {
    // 主入口 - 完整库
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.umd.cjs", 
      "types": "./dist/types/index.d.ts"
    },
    
    // 样式文件
    "./style.css": "./dist/style.css",
    
    // 单个组件（按需导入）
    "./components/button": {
      "import": "./dist/components/button.es.js",
      "require": "./dist/components/button.umd.cjs",
      "types": "./dist/types/components/button.d.ts"
    },
    
    "./components/input": {
      "import": "./dist/components/input.es.js", 
      "require": "./dist/components/input.umd.cjs",
      "types": "./dist/types/components/input.d.ts"
    },
    
    // 工具函数
    "./utils": {
      "import": "./dist/utils/index.es.js",
      "require": "./dist/utils/index.umd.cjs",
      "types": "./dist/types/utils/index.d.ts"
    }
  }
}

3、非常重要：关于生产pack包，也就是让他人引用的文件【npm按钮】

这里需要一个命令：npm pack 这个命令就是提供三方安装的组件包

此命令执行完成之后生成了一个.tgz的文件，这个文件就是使用者安装的问件

###这个很重要，之前不知道