npm 发布组件库步骤

第一步:注册 npm 账号

第二步:编写自己的组件库

第三部:编写 package.json

  • 可以通过命令生成
npm init

{
"name": "要发布 组件库的名字",
"version": "版本号:每次发布版本好都需要更新",
"description": "组件库 简介",
"keywords": [搜索关键词],
"main": "lib/mylib.umd.ts", // 文件入口
"module": "lib/mylib.js",
"exports": { // 引入包的方式
".": {
"import": "./lib/mylib.js"
},
"./*": "./*"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "关联组件库 git 地址"
},
"peerDependencies": {
"vue": "^3.2.0"
},
"publish": true,
"dependencies": {
"element-plus": "^2.6.3"
}
}

第四步:编写组件库并打包

第五步:发布

npm adduser --registry=https://registry.npmjs.org/ 要发布的源地址
// 根据提示输入 账号- 密码 - 邮箱 等相关信息
npm publish --registry=https://registry.npmjs.org/ 发布到 npm
// 发布成功后可以通过 npm search 查看是否已更新 (发布成功后可能会存在延迟更新)
npm search 你的包名 npm install 你的包名@最新版本好即可下载最新包

npm 发布自己的组件库的更多相关文章

  1. 将 Vue 组件库发布到 npm

    制作了一套自己的组件库,并发布到npm上,项目代码见 GitHub . 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd ...

  2. [转]使用 Angular CLI 和 ng-packagr 构建一个标准的 Angular 组件库

    使用 Angular CLI 构建 Angular 应用程序是最方便的方式之一. 项目目标 现在,我们一起创建一个简单的组件库. 首先,我们需要创建一个 header 组件.这没什么特别的,当然接下来 ...

  3. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

  4. 前端如何搭建vue UI组件库/封装插件(从零到有)

    需求 因之前是做外包项目居多,经常用到相同的组件,之前的办法是在一个项目中写一个组件,其他项目直接将compents下的组件复制,粘贴到项目中使用,缺点是维护起来,改一个项目,其他项目也需要修改,所以 ...

  5. 使用npm发布、查看、引用、删除自己的包[小白推荐]

    前言  怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述.要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手.于是,在博主的潜心钻研下,终于成功了!所以,我打算写一 ...

  6. 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

    译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...

  7. 创建一个自己的Vue UI组件库,并将它发布在npm上

    本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...

  8. 在npm上发布自己的vue组件库(使用npm install 或者 CDN的方式引用)

    一.npm publish发布包到npm库的命令是npm publish npm publish发布包,需要先配置webpack.json文件,如果没有webpack.json文件,可以通过npm i ...

  9. 从零开始封装React UI 组件库并发布到NPM

    github 开源地址:zswui github 说明文档:wiki 1.新建目录wui (1)进入到 wui 目录 执行 npm init 命令初始化项目.更具提示信息填充将会生成的 package ...

  10. 发布自己的npm组件库

    发布自己的npm组件库 前期准备 **git上建立自己的仓库,这样子是为了在本地初始化时,可以直接生成对应的 package.json ** 克隆仓库 创建仓库成功后,gitbush本地,执行 git ...

随机推荐

  1. 千万商家的智能决策引擎--AnalyticDB如何助力生意参谋双十一

    作者:算法&健兮,阿里巴巴数据技术及产品部技术专家 生意参谋介绍 生意参谋是阿里官方打造的全渠道.全链路.一站式数据平台,致力于为用户提供经营分析.市场洞察.客群洞察等多样化数据服务,帮助用户 ...

  2. OpenKruise v1.1:功能增强与上游对齐,大规模场景性能优化

    简介:在 v1.1 版本中,OpenKruise 对不少已有功能做了扩展与增强,并且优化了在大规模集群中的运行性能.以下对 v1.1 的部分功能做简要介绍. 作者:酒祝(王思宇) 云原生应用自动化管理 ...

  3. Serverless 场景排查问题利器 : 函数实例命令行操作

    ​简介:实例命令行功能的推出希望能消除用户使用 Serverless 的"最后一公里",直接将真实的函数运行环境展现给用户. 背景介绍 全托管的 Serverless 计算平台能给 ...

  4. HMS数据库设置和优化

    简介:Hive Metastore (HMS) 是一种服务,用于在后端 RDBMS(例如 MySQL 或 PostgreSQL)中存储与 Apache Hive 和其他服务相关的元数据.本文主要分享H ...

  5. [Docker] 使 Volume 独立于容器运行时的方式 - 让容器引擎去处理

    在单纯使用 run 命令运行一个容器时,通常会使用 -v 挂载的方式来实现宿主机数据卷映射到容器内. 使用命令: $ docker run --name mysql-con -v /my/custom ...

  6. WPF 探索任务管理器的进程分组逻辑

    在看到 Win10 或 Win11 的 Task Manager 任务管理器时,不知大家是否有一个疑问,在 进程 标签里的应用进程是如何分组的.为什么有些组能包含很多个不同的进程,有些只能包含一个.本 ...

  7. WPF 用到的触摸的 COM 接口

    本文记录 WPF 用到的触摸的 COM 接口 消息 用到了 WM_TABLET_ADDED 和 WM_TABLET_DELETED 消息 使用的代码是 src\Microsoft.DotNet.Wpf ...

  8. 还需要学习JDBC吗?如果需要该了解到怎么样的程度?

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 不知道大家在工作中还有没有写过JDBC,我在大三 ...

  9. 一个可一键生成短视频的AI大模型,亲测可用

    大家好,我是 Java陈序员. 自从 OpenAI 发布 Sora 文本生成视频模型后,文本生成视频的 AI 技术引起了无数圈内圈外人士的关注和实验. 今天,给大家介绍一个大模型,可一键生成短视频. ...

  10. 【Python基础】两个参数的for循环步长写法

    一个参数for循环步长写法 >>> for i in range(1,10000,1000):print(i) ... 1 1001 2001 3001 4001 5001 6001 ...