手把手教你用npm发布一个包

讲道理,这篇文章的标题应该是

为什么不为自己的express写一个autoRoutes(三)

但我感觉,这样写下去就有点太无耻了。。。


但是内容的话,还是一样的,也就是继续之前的工作,将那个autoRoutes给完善起来。
之前我们已经实现了路由的自动化构建,但是我们可以看到,一大串代码怼在里面,不美观对不对,一点都不愉♂悦。当然你也可以说,把它封装在一个.js文件里面,然后使用require('./autoRoute.js')给引入进来,那也行。
但是,为什么不把心放大一点呢?比如说,我们把它做成一个npm包!

预备工作

既然要作为一个npm包,那么我们就要先把我们的代码封装好。这一步跟封装在一个.js文件里面是一样的。
而且,为了让我的包看起来比较高大上,或者说,对比其他人写的包要有用一点(至少我觉得我这个代码是很简单的,比不过人家直接修改express的属性方法的代码)所以我觉定给这个包绑上一个自动渲染成接口文档的功能。嘿嘿嘿。
暴露数据的接口,在原代码里面已经有了,所以这里就把模板写好吧,我就给使用者提供一个渲染的数据模板。
利用饿了么前端发布的开源框架ElementUI,我快速的搭了接口文档的界面。然后提供一个数据模板:

接口文档界面

之前我的确也搭过一个。。。不过为了追求时髦值,果断换框架。
然后把数据模板规范化:

info:{
    name:'To get...',//接口的名字
    summary:'something',//接口的摘要信息
    content:[//接口的主要内容
        {
            title:'Query',//小节标题,
            summary:'some words',//小节摘要信息
            warn:'some words',//小节的警告信息
            table:{//创建小节表格
                thead:['Attribute','Type','Info'],//表格头
                tbody:[//表格数据
                    ['type','String','this attribute have two value.One is....']
                ]
            }
        }
    ],
    test:{//提供测试数据
        query:{//url的search参数
            "type":"nomal",
        },
        data:{//用于测试的post data数据
            "post":"123456"
        },
        text:'some words'//有关测试的一些内容说明文本
    }
}

是不是看起来很规整啊?
在写接口的同时写文档,然后文档的格式又如此贴心,换我早就感激涕零了。
恩恩,就先这样。然后,关于我封装那个.js我这里就不贴代码了好吧,想要看的,你直接npm install express-dir-route,或者直接看源码
那么,准备工作做好了,是时候.....

老板,来个npm账号!

因为你的包是要放在npm上的,所以,没有npm的账号,根本什么活都干不了。
在npm上注册一个账号是很简单的,随便填一下用户名密码邮箱,然后人家就会发个邮件给你,然后就注册成功了。。。这个是我注册后的样子:

npm

有了账号之后,你就可以执行npm publish这个操作了。不过,还没完。上面这些基本上都是凑字数的,接下来才是真正的教程。。。。

npm init

选择一个文件夹,然后用命令行cd进去,如图所示:

Paste_Image.png

然后,执行npm init,如图所示:

Paste_Image.png

接下来就是一长串表单:

  • name:填写你这个包的名字,默认是你这个文件夹的名字。不过这里要着重说一下,最好先去npm上找一下有没有同名的包。最好的测试方式就是,在命令行里面输入npm install 你要取的名字,如果报错,那么很好,npm上没有跟你同名的包,你可以放心大胆地把包发布出去。如果成功下载下来了。。。那么很不幸,改名字吧。。。
  • version:你这个包的版本,默认是1.0.0
  • description:其实我也不知道是什么,按回车就好了。。。,这个用一句话描述你的包是干嘛用的,比如我就直接:‘a plugin for express.register routes base on file path’
  • entry point:入口文件,默认是Index.js,你也可以自己填写你自己的文件名
  • test command:测试命令,这个直接回车就好了,因为目前还不需要这个。
  • git repository:这个是git仓库地址,如果你的包是先放到github上或者其他git仓库里,这时候你的文件夹里面会存在一个隐藏的.git目录,npm会读到这个目录作为这一项的默认值。如果没有的话,直接回车继续。
  • keyword:这个是一个重点,这个关系到有多少人会搜到你的npm包。尽量使用贴切的关键字作为这个包的索引。我这个包嘛,第一是在express下工作的,然后又是一个插件plugin,然后又是一个注册路由route用的,而这个路由又是基于文件目录dir,所以很好就得出我的包的索引关键字。
  • author:写你的账号或者你的github账号吧
  • license:这个直接回车,开源文件来着。。。
    然后它就会问你Are you ok?
    Paste_Image.png

    回车Ok!
    然后我们回到我们的文件目录里面去看一看,发现多出来一个package.json文件,点进去基本上就是上面这张图输出的信息。

然后,在目录下新建一个index.js文件,或者你刚才修改了那个entry point的值,那么你这个文件名也跟着改为那个值。
就像这个样子:

Paste_Image.png

因为我把封装好的代码都扔在lib里面,所以,index.js里面也就一句话:

module.exports=require('./lib')

不要问我为什么要这么做,因为你npm install其他包的时候,其他包里面的也是这样写的。。。。

然后,最重要的,写好README.md,一个给大家描述你的包的markdown文件,如果大家都不知道你的代码是做什么的,会有人去下载你的代码吗?哦,对了,最好写英文。我这里写了一套英文版的使用文档和一套中文版的使用文档。

然后,npm init的工作做完了。
接下来就是:用npm命令登陆一下:

Paste_Image.png

如果你对password是空的感到疑惑的话,不用紧张,命令行输入密码是不会显示的。
然后,在你的目录下使用npm publish
就像这样:

Paste_Image.png

这里因为我已经发布过了,而且version版本没有改变,所以这里npm会给我报错。一般情况下,一旦你要修改你已经发布后的代码,然后又要执行发布操作,务必到package.json里面,把version改一下,比如从1.0.0改为1.0.1,然后在执行npm publish,这样就可以成功发布了。

看看我们发布的包

这里先使用npm install 你发布出去的包的名字,然后看看命令行里面是不是把你的包下载了下来。如果下载成功,就说明你的包已经成功地发布在npm上了。
或者你亲自上npm这个网站(该带梯子的请自带梯子),然后在搜索框里面输入你刚才写下来的关键字。。。不过,如果你的包的星星(点赞)数量不够的话应该会排到很尾。。。所以我建议你用包名直接搜(反正我用关键字找找不到我的包。。。)

Paste_Image.png

看,第一个就是我发布的包。。。短短四天时间内已经57星了。。。。

就这样啦。。。


======2016-12-2 14:44:29补充==========
对了,忘记说了一件事,就是有关于测试npm包的问题。
在你执行完npm init这个步骤之后,你把代码扔进这个包里面后,就形成了一个本地的包,可以直接把这个包扔到项目里面node_module这个文件夹里面的,然后在你的项目里面就可以直接:

  var a=require('你的包名');

直接使用包名引入,不用文件路径了,就像引入fs或者http模块一样
测试完确定没有什么bug之后再执行npm publish


发布完一个包后,可能你还想:
用Node编写命令行

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

推荐阅读更多精彩内容