发布自己的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包名称已经被占用了，或者当前的包版本不对。名称不对该名称或者使用组织名。包版本不对就升一个版本看看就好

好了，现在你拥有了属于自己的组件库，好好维护吧