Vue3+Typescript+Vite发布npm包

创建项目

npm init vite@latest。选项依次选择vue和vue-ts

编写组件

1. 在src下新建packages文件夹，在packages文件夹下新建Image/index.vue文件
   在src下新建export.ts文件，添加内容

import Image from './packages/Image/index.vue';
export {
  Image
}

2. 编辑vite.config.ts文件，新增build属性

  build: {
    lib: {
      entry: path.resolve(__dirname, './src/export.ts'),
      name: 'vue3-image-vue',
      fileName: (format) => `build.${format}.ts`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }

3. 编辑package.json文件，增加如下信息

"name": "vue3-image-viewer",
  "version": "3.1.11",
  "files": [
    "dist"
  ],
  "module": "./dist/build.es.ts",
  "main": "./dist/build.umd.ts",
  "exports": {
    ".": {
      "import": "./dist/build.es.ts",
      "require": "./dist/build.umd.ts"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "keywords": [
    "vue3",
    "image",
    "viewer",
    "vue",
    "vite",
    "preview",
    "picture",
    "photo"
  ],

打包组件并发布

1. 运行yarn build命令
2. 运行npm login命令登录npm账号（需要提前注册），并且npm镜像要为默认源，否则登录不上去
   设置默认源
   npm config set registry https://registry.npmjs.org
3. 运行npm publish命令发布包，不能重名，如果重名修改package.json中的name

使用组件

yarn add vue3-image-viewer

import { Image } from "vue3-image-viewer";
import "vue3-image-viewer/dist/style.css"

注意事项

1. 打包时要把app.vue中的内容注释掉并把public中的不相关文件删除不然容易失败或者打包进不相关内容
2. 每次发布更新需要更改版本号，X.Y.Z，X为不向下兼容大版本，Y为向下兼容新功能，Z为向下兼容bug修复，所以修改YZ会导致包内容不是最新的，修改X后下载包时需要暂停程序重新安装包
3. 在当前项目中，通过引入dist下面的文件来快速测试
4. 在readme.md文件中添加包的使用说明，将在npm页面显示
5. 如果包内容没有更新，尝试删除node_modules文件夹，删除package-lock.json，删除yarn.lock后重新安装