这几天在写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 项目文件目录如图一
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呢?看下表
暂时更新至这里,之后再完善本地测试方式;有问题可在评论区联系我,一起讨论一起进步