手把手教你用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哦
