npm发布组件_npm readme-优快云博客

本文链接：https://blog.youkuaiyun.com/hkduan/article/details/104855765

本文详细介绍如何在Vue项目中创建组件库，包括组件的注册、使用Rollup进行打包的优势，以及通过npm发布组件库的具体步骤。从配置package.json到执行打包命令，再到npm上架及后期维护，为开发者提供了一套完整的组件库发布流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

src里面新建package文件夹
用rollup打包比webpack好，因为简介，支持输出esm（es6格式）
写组件代码。然后开始打包发布：
1.注册组件
1.1 注册单个组件

//package/index.js
import PigButton from "../package/pig-button/index.vue"; // 引入封装好的组件
const coms = [PigButton]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};

export default install; // 这个方法以后再使用的时候可以被use调用

1.2 注册多个组件(vue3)

import { App } from 'vue'
import { IDirectiveProps } from './type'
import '@/style/index.css';

export default {
    install(app: App) {
        const modules = import.meta.globEager('./**/*.ts'); // vue2用require.context 
        Object.keys(modules).forEach(moduleName => {
            const directive: IDirectiveProps = Reflect.get(modules, moduleName).default;
            if (directive && directive.directiveName){
                const {directiveName,directiveValue} = directive;
                app.directive(directiveName,directiveValue)
            }
        })
    }
}

2.打包
在package.json中配置打包信息

"name": "duan_vue3-directive-next-ts2", //名称
  "private": false,
  "version": "1.0.0",  // 每次发布要修改一下版本,npm version patch自动修改
  "files": [
    "lib/"
  ],
  "exports": {
    ".": {
      "import": "./lib/v-directive.es.js",
      "require": "./lib/v-directive.umd.js"
    }
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": "vue-cli-service build --target lib ./src/package/index.js --name pig-ui --dest pig-ui" // 这行是打包
  },

打包命令解释：

–target lib 关键字指定打包的目录
–name 打包后的文件名字
–dest 打包后的文件夹的名称
npm run package
打包执行完成后我们项目目录下就会多出一个pig-ui文件夹，存放的是打包后的文件。
在这里插入图片描述