React Native 组件封装上传简单教程

组件化.jpg

npm是一个node包管理和分发工具，已经成为了非官方的发布node模块（包）的标准。通过npm可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。
本文将就如何发布npm包进行一个详细的介绍以及将之前封装的react-native-zkbanner作为例子进行发布。

注册npm账户：

进行发布的操作之前，我们需要首先在npm官网上注册自己的账号，用于后面发布时使用。
注册地址：https://www.npmjs.com/

添加账号信息：

这里我们发布到npm官网所在的仓库，执行以下命令添加用户信息：

npm adduser --registry http://registry.npmjs.org

执行命令之后，会提示填写用户名，密码以及邮箱，填写之前在官网注册的信息就可以了。

发布npm插件：

1、在命令行工具中，切换当前路径到要发布的插件的路径下，发布必须有package.json文件，这是使用npm init命令生成的，根据自己插件的具体信息再进行输入。下面代码是react-native-zkbanner组件的package.json文件。

{
  "name": "react-native-zkbanner",
  "version": "1.0.0",
  "description": "zkbanner",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "react-native",
    "banner",
    "react-native-zkbanner"
  ],
  "author": "Cain",
  "license": "MIT"
}

name:

name和version是package.json中最重要的两个字段，也是发布到NPM平台上的唯一标识，如果没有正确设置这两个字段，包就不能发布和被下载。
以下是官方给出的一些建议:
名字里不要再包含"js"和"node"，因为默认NPM包就是node.js程序，不过你可以通过engines字段来指定。
名字将会被作为url的一部分，所有要符合http url的一般命名规则，不能包含url非法字符，也不能以.和_开头。
名字也将作为require()命令的参数，所以应该尽量简明。
如果包要发布到NPM平台上的话，最好先检查下有没有重名, 并且字母只能全部小写。
新版本的NPM可以指定scope, 名字可以加前缀标识，如@ijse/mypackage。

version

发布的版本

description

包的描述信息，将会在npm search的返回结果中显示，以帮助用户选择合适的包。

keywords

包的关键词信息，是一个字符串数组，同上也将显示在npm search的结果中。

main

包的入口文件，如index.js

以上是package.json的部分字段的介绍，详细可以参考package.json for NPM 文件详解

2、将插件发布到npm上：

npm publish --registry http://registry.npmjs.org

这里加上--registry http://registry.npmjs.org 是为了区别于我们当前的npm私服，如果不加上的话，发布就是默认发布到npm所设置的源。

查看发布情况：

命令执行完成后，打开npm链接：https://www.npmjs.com/ + 插件名， 就可以看到已经成功发布了，这里我的插件地址是：https://www.npmjs.com/react-native-zkbanner 。

新轮子：

react-native-zkbanner

Demo

安装方法：

npm install react-native-zkbanner