标签：npm git react 组件 basiclayout native

前奏

做前端也有一段时间了，封装了大大小小很多的组件，至今自己都有点想不起来了有哪些了，但都是在项目代码里面。如果想跨项目使用，要用的时候需要一个个项目去翻找，还必须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/ios-zhouyu/VueDemo.gitGitHub - kanglang/react-native-basiclayout: react native 的一个基础布局容器 ,A basic layout container of react nativehttps://github.com/kanglang/react-native-basiclayout.githttps://github.com/ios-zhouyu/VueDemo.git

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

git remote add origin https://github.com/ios-zhouyu/VueDemo.gitGitHub - kanglang/react-native-basiclayout: react native 的一个基础布局容器 ,A basic layout container of react nativehttps://github.com/ios-zhouyu/VueDemo.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库

这里必须要强调下，淘宝镜像是不能调用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

主要有发布需要的所有信息，包括：组件名、版本、作者、描述、依赖等等关键信息

-------未完待续-----

标签：npm,git,react,组件,basiclayout,native
来源： https://blog.csdn.net/KungLun/article/details/122582317

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。