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. Nacos 2.0 性能提升十倍,贡献者 80% 以上来自阿里之外

    简介: 3 月 20 日,Nacos 2.0 正式发布.Nacos 是阿里巴巴在 2018 年开源的一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台,也可以理解为微服务的注册中心 + 配 ...

  2. 前沿分享|阿里云数据库资深技术专家 姚奕玮:AnalyticDB MySQL离在线一体化技术揭秘

    ​简介: 本篇内容为2021云栖大会-云原生数据仓库AnalyticDB技术与实践峰会分论坛中,阿里云数据库资深技术专家 姚奕玮关于"AnalyticDB MySQL离在线一体化技术揭秘&q ...

  3. [FAQ] GoLand 需要手动开启代码补全吗 ?

    使用 go mod download 下载模块到本地缓存中,之后 GoLand 就会根据输入自动代码提示. Other:[FAQ] Goland 始终没有包代码的提示 Link:https://www ...

  4. 2019-11-29-WPF-Process.Start-出现-Win32Exception-异常

    title author date CreateTime categories WPF Process.Start 出现 Win32Exception 异常 lindexi 2019-11-29 10 ...

  5. 【爬虫+情感判定+Top10高频词+词云图】"乌克兰"油管热评python舆情分析

    目录 一.分析背景 二.整体思路 三.代码讲解 3.1 爬虫采集 3.2 情感判定 3.3 Top10高频词 3.4 词云图 四.得出结论 五.同步视频演示 六.附完整源码 一.分析背景 乌克兰局势这 ...

  6. oracle RDBMS Kernel Executable 占用内存过高

    oracle RDBMS Kernel Executable 占用内存过高 参考:https://www.cnblogs.com/markkang/archive/2019/11/25/1192540 ...

  7. blocks (单调栈)

    题目描述 解析 对于这道题,他要求大于k的数进行操作,所以直接让每个数减k,然后用前缀和维护一下与0比较就可以了,因为一段区间和的平 均值大于k的话,那么这就是一个合法区间,即为操作后的这个区间和大于 ...

  8. ECMAScript 语言规范每年都会进行一次更新,而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前,ECMAScript 2024 的候选版本已经发布,为我们带来了一系列实用的新功能。

    Promise.withResolvers 使用 Promise.withResolvers() 关键的区别在于解决和拒绝函数现在与 Promise 本身处于同一作用域,而不是在执行器中被创建和一次性 ...

  9. 使用systemctl管理服务(nginx)

    首先调整好路径信息,修改配置文件vim /usr/lib/systemd/system/nginx.service [Unit]Description=The nginx HTTP and rever ...

  10. 如何利用 Seaborn 实现高级统计图表

    本文分享自华为云社区<使用 Seaborn 实现高级统计图表从箱线图到多变量关系探索> ,作者:柠檬味拥抱. 在数据科学和数据可视化领域,Seaborn 是一个备受欢迎的 Python 可 ...