React Native npm组件制作简单教程

729 查看


组件化.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