npm 发布自己的 ui 库

封装属于自己的ui组件并发布到npm

• 注册npm账号 npm官网

• (vue3组件库封装)

初始化 package.json 文件

 npm init

与 package.json 同级文件夹建立入口文件 index.ts (如过使用js写就创建 index.js 文件)

• components.ts (将你写的vue组件全部引入到该文件方便批量处理)

/*
 * @Author: boyyang
 * @Date: 2022-01-28 10:50:19
 * @LastEditTime: 2022-01-29 10:06:12
 * @LastEditors: boyyang
 * @Description: 组件导出
 * @FilePath: \boyyang\src\plugin\components.ts
 */

export { default as Button } from './boyyangUI/button/index.vue'
export { default as CountDown } from './boyyangUI/countDown/index.vue'
export { default as ColorSelector } from './boyyangUI/colorSelector/index.vue'
export { default as GlassCard } from './boyyangUI/glassCard/index.vue'
export { default as Switch } from './boyyangUI/switch/index.vue'

• componentsRegister.ts 注册组件方法

/*
 * @Author: boyyang
 * @Date: 2022-01-28 11:21:19
 * @LastEditTime: 2022-01-28 15:15:01
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\plugin\utils\componentsRegister.ts
 */

import { App } from "vue"

const componentsRegister = (components: object, app: App, prefix: string) => {
    const _components = Object.keys(components).map((key) => {
        return { name: `${prefix}${key}`, component: components[key as keyof typeof components] }
    })

    for (let i = 0; i < _components.length; i++) {
        app.component(_components[i].name, _components[i].component)
    }
}


export {
    componentsRegister
}

• index.ts

/*
 * @Author: boyyang
 * @Date: 2022-01-27 17:04:20
 * @LastEditTime: 2022-01-28 14:53:59
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\plugin\index.ts
 */

import { App } from 'vue'

import { componentsRegister } from './utils/componentsRegister'
import { prefix } from './utils/prefix' //组件前缀

import * as components from './components'

const boyyangui: any = {}

boyyangui.install = (app: App) => {
    componentsRegister(components, app, prefix)
}

export {
    boyyangui
}

项目打包 vite.config.ts打包配置

/*
 * @Author: boyyang
 * @Date: 2022-01-31 11:41:09
 * @LastEditTime: 2022-01-31 13:06:03
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\plugin\vite.config.ts
 */

import { ConfigEnv, defineConfig, UserConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    const root = process.cwd()
    const env = loadEnv(mode, root)
    return {
        base: './',
        plugins: [
            vue()
        ],

        build: {
            assetsDir: 'assets',
            target: "es2019",
            brotliSize: false,
            chunkSizeWarningLimit: 2000,
            lib: {
                entry: path.resolve(__dirname, 'index.ts'),
                name: 'boyyangUi',
                fileName: (format) => `boyyang.${format}.js`
            },
            rollupOptions: {
                // 确保外部化处理那些你不想打包进库的依赖
                external: ['vue'],
                output: {
                    // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
                    globals: {
                        vue: 'Vue'
                    }
                }
            }
        }
    }
})

package.json 配置

{
  "name": "boyyang-ui",
  "version": "1.3.4",
  "description": "boyyang UI lib",
  "main": "dist/boyyang.umd.js",
  "repository": "https://github.com/boyyang-love/boyyang",
  "author": "boyyang",
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "start": "vite --mode production",
    "build": "vite build",
    "preview": "vite preview",
    "lib": "vite build"
  },
  "dependencies": {
    "@types/node": "^17.0.6",
    "moment": "^2.29.1",
    "sass": "^1.45.2",
    "seemly": "^0.3.3",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  }
}

发布组件

• 在根目录 打开 cmd

• 执行 npm login (第一次会输入邮箱账号已经登录密码)

• 执行 npm publish (上传，每次上传的 package.json 的版本号不能相同)