RN npm插件制作发布流程以及新轮子——react-native-zkbanner 轮播组件




  • 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
    

  • administrators

    感谢分享,能否再加入一些package.json的内容的讲解?



  • @sunnylqm 好的,我也正在学习


登录后回复