发布自己的包至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

$ npm publish

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

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