封装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

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

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

四、编写组件代码

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

 如果我们封装的是一个需要调用安卓或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

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

七、发布

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

$ npm publish

更新发布

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

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

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