封装react-native组件开源到npm

前奏

做前端也有一段时间了,封装了大大小小很多的组件,至今自己都有点想不起来了有哪些了,但都是在项目代码里面。如果想跨项目使用,要用的时候需要一个个项目去翻找,还必须copy代码过去,着实头痛。

近期,恰逢公司要求封装独立的组件系统供各个系统标准化调用。这才开始将现有组件逐一进行发布。当然,公司使用的内网,这里是我经过修改后,开源后方便自己之余以供大家参考。

tips: 这里将采用第三方的插件(react-native-create-library)来进行快速集成(毕竟重复造轮子的事情,不是我们这些懒汉该有的勤勉)

现将发布npm平台的流程、方法公布如下:

一、全局安装react-native-create-library

$ npm install -g react-native-create-library

二、创建初始模板项目

react-native-create-library --package-identifier com.kll.basiclayout --platforms android,ios basiclayout

这里 com.kll.basiclayout是安卓模块的包名,basiclayout为创建的项目名,这里需要特别注意,不要写成 react-native-basiclayout(当然你写了 也没有问题,但是看起来会很丑),因为当你加了react-native时,react-native-create-library会帮你在创建项目名称的时候会自动添加react-native 前缀,如果你在创建模板的时候加了react-native的话,创建出来的项目将是react-native-react-native-basiclayout(当然你能接受我也没啥说的)。

三、重命名项目名

$ mv basiclayout react-native-basiclayout

这里不要多说吧 ,各位看官应该都能看得懂!

到此,项目模板算是建好了。接下来就是需要编写我们的组件代码了。

四、编写组件代码

编写组件代码前,我们来看一下此事的项目结构图

封装react-native组件开源到npm_第1张图片

 如果我们封装的是一个需要调用安卓或ios原生的方法的组件,在安卓和ios中分别编写好方法(如果各位不具备原生开发的能力,可以查找教程进行学习,这里不过多说明),然后在index.js中调用,之后暴露出去即可。

当然,如果是纯javescript组件,则可以删除android和ios文件夹。

编写好的组件代码,export default Basiclayout暴露出去即可。

五、代码上传到github

git将本地已有项目,并推送到远端Git仓库操作,有以下几步操作:

1. 创建本地项目,在项目根目录执行git init命令

git init

2. 在git服务器上创建一个仓库,这里使用GitHub创建一个仓库。

例如这个git仓库   https://github.com/kanglang/react-native-basiclayout.git 

3. 执行git remote add origin ,git path 可以在【Clone or download】中获取。

git remote add origin  https://github.com/kanglang/react-native-basiclayout.git  

4.git remote -v  查看远程关联的仓库地址

如果第3步关联错误,先 git remote rm origin 取消关联,在重复第3步

5. 从远程分支拉取master分支并与本地master分支合并(如果远程仓库无任务文件,省略此步)

git pull origin master:master

6. 提交本地分支到远程分支

git add -A

git commit -m '初始化git项目'

首次提交 git push -u origin master

往后 git push origin master

以上6步做完,代码已成功提交git 仓库

六、发布前准备

这里必须要强调下,淘宝镜像是不能调用npm的api的,所以先得切换到npm 的镜像

npm config get registry # 查看当前镜像源
npm config set registry=http://registry.npmjs.org # 更改回官方镜像源

1、先创建账户

$ npm adduser

这里根据提示一步步进行即可或者通过官网去注册

2、登录npm 

 $ npm login

根据提示依次输入用户名、密码、邮箱即可登录。

3、查看是否登录成功

$ npm whoami

4、创建 .gitignore 和 .npmignore

将不希望被提交到github和npm官网的文件 分别加入这两个文件中

5、完善package.json

主要有发布所需的相关信息,包括:组件名、版本号、描述、入口文件、作者、依赖、仓库地址等等关键信息

封装react-native组件开源到npm_第2张图片

七、发布

首次发布,执行如下命令,看到success即成功

$ npm publish

更新发布

// 修改package.json文件中version后继续下一步操作
$ npm publish

到此 组件封装发布到npm官网的流程和方法就说完了,如果跟各位看官有不一样的方法的 ,请评论交流!

如果此贴能够帮到各位,也请各位看官点赞+关注哦!!

你可能感兴趣的:(React-Native,npm,react,native)