发布自己的包至npm,集成react-native方法;

这几天在写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

email

可以通过以下命令查看是否登录成功

$ npm whoami

3.4、发布

第一次发布可使用以下命令

$ npm publish

更新发布则使用以下命令

$ npm version <update_type>

$ npm publish

$ npm version命令是用来自动更新版本号,update_type取值有patchminormajor。那么在什么场景应该选择什么update_type呢?看下表


暂时更新至这里,之后再完善本地测试方式;有问题可在评论区联系我,一起讨论一起进步

              

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容