开源自己的react组件到npm

背景：公司让做一些开源的事情，至于目的大家都能猜到，这里就不多说了，无非就是增加团队影响力（个人觉得没有什么用，哦哈~）。对于个人来说，如果能有机会参与到开源项目还是非常不错的一个经历，毕竟做自己喜欢的事情是每个人所期待的。

好了，闲话不多说了，先附上本次开源组件的链接，有兴趣的朋友可以直接在npm下载~

 npm：https://www.npmjs.com/package/react-colour-block
 源码地址：https://github.com/kafeihaoka/react-colour-block
 DEMO示例地址：https://kafeihaoka.github.io/react-colour-block/

接下来说一下本次制作开源组件心得，希望能够帮助到大家~

1.挑选组件

首先，组件是我在日常开发中已经做好的组件，从中挑选了一个；这次挑选的是《仿GA监测页面的一个多维度选择彩色块选择器》，以下：

2.开源组件项目与平常做的项目的区别

平时我们开发页面（例react、webpack）使用webpack是为了编译生成最终压缩后页面，那我们现在做开源组件是要发布到npm供npm的每个用户使用，所以当然我们现在要使用webpack编译生成最终压缩后的组件（即js、css、img等），所以在配置webpack.prod.config.js的时候我们指定的压缩入口就需要是你的组件入口js。

3.说一下我的项目目录

config - 配置webpack dev与prod两个环境下打包方式的目录，base为两个配置的公共目录；

example - 在本地测试自己组件的目录，既然是要发布给大家用，当然还是先自测一下比较好；

lib - 打包生成文件的目录，这里存放build生成后的文件，记得最后把package.json里的main改为此目录的index.js，当然你也可以起dist或者别的目录名；

src - 你要发布的组件的源代码；

想看源码可以直接去我的github上去浏览，上面和github上也都附带了demo示例链接~

4.说一说REAME.md

既然我们是在做一个开源组件，那我们是真的非常有必要写清楚我们组件的用途以及怎样去使用，这个是非常重要的，除非你不打算给别人使用~ 所以这里就需要多一嘴，写好你的readMe！

• 最好有一个demo链接，这样能让使用者看到你的组件效果；
• 最好有一个API介绍，这样能让使用者清晰的认知如何使用好你的组件；
• 最好有一个demo示例，这样可以让使用者知道如何引用你的组件；

5.请记得修改package.json

请记得修改package.json里的author，这将代表项目的作者是谁；也请写好你的仓库repository，这将让大家能找到你的github地址。

6.聊一聊发布组件到npm

当你的开源组件项目npm build编译好以后，你就可以发布到npm了。首先你得登录npm，可以使用npm login 命令，如果没有账号可以去官网建一个，如果你的npm使用的是淘宝镜像，那你首先还需要把你的镜像改回来再登录，要不然是发布不了的；然后你需要再检查一下你的代码，review一下，以防漏掉了细节~没有问题之后你就可以使用npm publish进行发布了。

7.上传你的组件源码到github

当你发布完后，你可以上传你的项目源码到github，这样如果后面有人使用你的组件觉得不错然而又有新的想法，他也可以提出自己的issue，你们可以在github上讨论沟通，进行迭代~

以上，如果对你有帮助的话请点个赞或者在github上点个小星星~