这几天在写react-native，主要是集成了一些自己想要的组件、方法方便以后调用；然后上传到npm包管理，方便以后可以直接install；
学习的道路总是漫长而又曲折的，不懂撩妹的我，也只能写写笔记方便自己加强记忆，废话不多，贴下步骤；
1、注册用户；
在npm官网注册 https://www.npmjs.com/
注册完成后，npm会发一封验证邮件，一定要去验证，不然发布的时候还是会提示你先验证邮箱，否则是提交不上去的；我就在这里踩了一个小坑，哈哈哈。。。
2、创建自己的包文件
注册完，当然是要开始开发自己的包；这里我是以react-native作为示例，主要是以iOS和Android平台通用的一个mircetools
2.1 、创建自定义组件模版项目
2.1.1 、全局安装 react-native-create-library
$ npm install -g react-native-create-librar
2.2.2、创建模板文件
我们用命令react-native-create-library创建项目，并指定平台为ios,android，指定android中的package，其他参数可以自行参考在react-native-create-library在github上的文档说明，mircetools为模板项目名称
$ react-native-create-library --package-identifier com.quenice.mircetools --platforms android,ios mircetools
重命名模板项目名称
$ mv mircetools react-native-microtools
备注：为什么要重命名项目名称，不在一开始的时候就使用react-native-microtools文件名创建呢？？？
因为利用react-native-create-library生产的项目，一些跟组件相关的名称或者类会默认加上react-native或者RN前缀。举荔枝，如果初始项目名是react-native-microtools，那么package.json中定义的组件名将是react-native-react-native-microtools，android模块中定义的相关类会是RNReactNativeMicrotoolsModule.java，命名显示上会不太好看，所以笔者采用这种方式编写。
2.2.3 项目文件目录如图一
图1
3、编写代码
由于只是做个简单的示例，所以我只在index.js文件暴露了几个简单的方法；
index.js
import { NativeModules }from 'react-native';
import {Linking, Platform}from 'react-native';
const {RNMicrotools }= NativeModules;
//export default RNMicrotools;
export default {
openLink:function(linkAddress){
return Linking.openURL(linkAddress);
},
openApp:function(appName){
let appAddress='';
let tip='';
switch (appName) {
case 'weixin':
appAddress= 'weixin://';
tip='请安装微信';
break;
case 'alipay':
appAddress=Platform.OS=== "ios"?'alipay://' : 'alipays://';
tip='请安装支付宝';
break;
}
Linking.canOpenURL(appAddress).then(supported => {
// 可以跳转
if (supported) {
Linking.openURL(appAddress)
}else {
alert(tip);
// 不能跳转 未安装或者其他错误
// 跳转到下载链接或者提示用户app没安装
}
})
}
}
本人是前端开发，iOS及Android没啥研究，日后再跟上，哈哈哈；
代码编写完成，准备好上传项目代码至github;
3、 代码上传
3.1、在github创建项目仓库；怎么创建之后另做一篇笔记，哈哈哈，先自行上 https://github.com/ 查看
3.2、进入终端进入react-native-microtools项目，初始化git，提交代码；
$ cd react-native-microtools
$ git init
$ git add .
$ git commit -m 'react-native-microtools第一次提交'
$ git push
3.3、组件发布
开发好组件之后，想在其他的项目(或者提供给其他人安装使用)中通过npm install的方式安装你的组件，那么你的组件必须发布到npm registry中。
3.3.1、npm registry
npm registry 是什么
简单来说，npm registry就相当于一个包注册管理中心。它管理着全世界的开发者们发布上来的各种插件，同时开发者们可以通过npm install的方式安装所需要的插件。
npm官方registry为：http://registry.npmjs.org/
国内速度较快的为：https://registry.npm.taobao.org/
查看当前使用的registry:
$ npm config get registry
切换registry：(因为上传到npm需用到官方的registry，所以最好切换回npm官方registry)
# 全局切换
$ npm config set registryhttp://registry.npmjs.org/
有时候你可能只想在执行某些npm命令时临时切换，这个时候，可以使用--registry来指定临时切换的registry，比如在npm发布
$ npm publish --registryhttp://registry.npmjs.org/
3.3.2、登录npm registry账户
$ npm login
过程需要输入 :
username
password
可以通过以下命令查看是否登录成功
$ npm whoami
3.4、发布
第一次发布可使用以下命令
$ npm publish
更新发布则使用以下命令
$ npm version <update_type>
$ npm publish
$ npm version命令是用来自动更新版本号，update_type取值有patchminormajor。那么在什么场景应该选择什么update_type呢？看下表
暂时更新至这里，之后再完善本地测试方式；有问题可在评论区联系我，一起讨论一起进步
网友评论