背景:公司让做一些开源的事情,至于目的大家都能猜到,这里就不多说了,无非就是增加团队影响力(个人觉得没有什么用,哦哈~)。对于个人来说,如果能有机会参与到开源项目还是非常不错的一个经历,毕竟做自己喜欢的事情是每个人所期待的。
好了,闲话不多说了,先附上本次开源组件的链接,有兴趣的朋友可以直接在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上点个小星星~