发布自己的npm组件库
发布自己的npm组件库
前期准备
**git上建立自己的仓库,这样子是为了在本地初始化时,可以直接生成对应的 package.json
**
克隆仓库
创建仓库成功后,gitbush本地,执行 git clone giturl
git蛮人性化的,在空仓库中有命令行提示,不懂得可以直接复制在本地执行
克隆成功后,假设现在,我是安装在D盘的 D:\ReactLearn\person
目录下,在该目录执行cmd打开命令行工具,针对于winodws用户,mac请自行打开命令行
初始化项目
初始化npm项目
在打开的命令行工具中执行 npm init -y
-y 的意思是npm所询问的问题,默认都选择 y 初始化项目成功后,会发现 package.json
的名字默认就是git仓库的名称,这也是为什么初期要建立仓库的原因。
引入组件开发文档工具
对于自己的组件库,自然需要有文档供其他人的查阅与使用,这里选择 dumi
框架作为组件开发文档的框架,dumi中我们只需要专注组件功能与逻辑的开发,文档都是配置生成的,如果有其他的框架取代,后续涉及dumi的知识可以略过,dumi其实只是懒于写文档的一种捷径罢了,与发npm包其实没直接关系
初始化dumi项目
在 D:\ReactLearn\person
中执行 yarn create @umijs/dumi-lib --site
site代表使用dumi的文档形式,这里注意,dumi的使用node版本必须是 v10.13.0 以上
初始化dumi项目之后,记得更新我们原本的package.json的name属性,避免与框架文件起冲突,这里只需要主要name即可,依赖还是dumi的依赖这里的name涉及到后续发布npm包的名称
注意下dumi的文件结构,可以按照该结构,先建立文件,在这我就不介绍dumi的使用,有兴趣的参考文档
这里需要注意,/src/index.ts
必须导出你所需要别人使用的组件,为何在此导出后续讲到打包时会提及的,代码可以参考如下
这里导出的组件,就是后续别人使用的入口
使用方法:import {Foo} from '组件名称'
这里我们只导出简单的Foo组件,功能就是传入一个值页面展示罢了
<Foo value='Hello World'>
配置package.json
这里涉及到几个知识点
打包工具
因为组件库是需要我们打包后上传,例如dist文件夹,因此需要选择一种打包工具,dumi框架中默认使用了father的打包工具,因此无需过多关心打包的事情,只需要执行 yarn build
即可
打包类型
打包主流的目前所知,分为 esm cjs umd三种格式
esm:导出方式为 export import
cjs:导出方式为require
umd:整合为对象,通过script标签进行引入。
package.json 配置项
讲完打包的一些内容,就进入了发包的过程,npm发包主要看pck文件的配置,例如入口文件,发包文件夹等等,因此介绍下pck的配置便于更好的理解打包发包流程。贴上简单的配置图
main:入口文件,这指的是其他人使用时,从这个路径引入组件
module:es6编译入口文件
files:包含在项目中的文件(夹)数组,也就是你要发送到远端的文件夹
typings:TypeScript 的入口文件
打完包,完成pck的配置,我们就可以进入最后一个阶段了:发包到远端
发送npm包至远端
首先你得有一个npm账号,如何建立不赘述
先执行 npm login
进行登录
在执行 npm publish
将你的组件库发布到官网上。
在此可能会遇到一个错误403,这代表这你的npm包名称已经被占用了,或者当前的包版本不对。名称不对该名称或者使用组织名。包版本不对就升一个版本看看就好
好了,现在你拥有了属于自己的组件库,好好维护吧
发布自己的npm组件库的更多相关文章
- 基于Vue的npm组件库
前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...
- 在npm上发布自己的vue组件库(使用npm install 或者 CDN的方式引用)
一.npm publish发布包到npm库的命令是npm publish npm publish发布包,需要先配置webpack.json文件,如果没有webpack.json文件,可以通过npm i ...
- 如何发布自定义的UI 组件库到 npmjs.com 并且编写 UI组件说明文档
记录基于 antd 封装业务组件并发布到npm 上的过程:(TS + React + Sass) 初始化项目: 1.yarn create react-app winyhui --typescript ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- 创建一个自己的Vue UI组件库,并将它发布在npm上
本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新 ...
- 如何快速为团队打造自己的组件库(上)—— Element 源码架构
文章已收录到 github,欢迎 Watch 和 Star. 简介 详细讲解了 ElementUI 的源码架构,为下一步基于 ElementUI 打造团队自己的组件库打好坚实的基础. 如何快速为团队打 ...
- Vite+TS带你搭建一个属于自己的Vue3组件库
theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被 ...
- Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo
前两篇文章分享了基于 vite3 vue3 的组件库基础工程 vue3-component-library-archetype 和用于快速创建该工程的工具 yyg-cli,但在中大型的企业级项目中,通 ...
- 从零开发一款自己的小程序UI组件库(一)
写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的 ...
随机推荐
- MongoDB 安全认证
每日一句 Sometimes your whole life boils down to one insane move. 人一生中出人头地的机会不多,一旦有了一定要抓住! 概述 默认情况下,Mong ...
- node-sass,sass-loader和node之间的关系
vue-cli运行在node平台上scss语言是运行在 node-sass平台上node-sass的运行环境是node平台vue-cli工程中不识别scss语法,.scss模块,sass-loader ...
- Vue基础篇之 插槽 slot
- application.properties文件中暗藏玄机
上次分享了如何一步一步搭建一个springboot的项目,详细参见<5分钟快速搭建一个springboot的项目>,最终的结果是在"8080"端口搭建起了服务,并成功访 ...
- Python Django 功能模块
Python Django模块 Django模块,是针对有django基础,对django功能进行模块化,方便下次使用. 一.注册模块 该注册采用邮箱验证,注册成功后会发送激活链接到邮箱. 邮箱验证参 ...
- SpringSecurity简单入门
1.简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spr ...
- SpringCloud 配置管理:Nacos
目录 统一配置管理 配置热更新 配置共享 多环境配置共享 多服务配置共享 统一配置管理 将配置交给 Nacos 管理的步骤: 在 Nacos 中添加配置文件. 在微服务中引入 nacos 的 conf ...
- 2021.05.05【NOIP提高B组】模拟 总结
T1 给你一棵树,要求增加最少的边权是的从根到每一个叶子的长度相等 不能改变原有的最大长度 这是一个贪心:尽可能往深度小的边增加 先预处理出 \(mx_i\) 表示从 \(i\) 到叶子的最大长度 然 ...
- 【小程序自动化Minium】一、框架介绍和环境搭建
微信小程序自动化测试系列分享 一.Minium 简介 minium 是微信团队为小程序专门开发的自动化框架,我们可以用它来做小程序的UI自动化测试,但是它的能力却不仅仅在于UI自动化. 正是得益于官方 ...
- JS:三目运算符
语法:条件表达式?表达式1:表达式0 注:当条件表达式为true则选择表达式1,反之false则选择表达式0 例: var a = 0; var b = 1; re=a>b?a:b consol ...