手把手教你用npm发布一个包，详细教程

咱们已经实现了路由的自动化构建，可是咱们能够看到，一大串代码怼在里面。固然你也能够说，把它封装在一个JS文件里面，而后使用 require('./autoRoute.js')给引入进来，那也行。可是，为何不把心放大一点呢？好比说，咱们把它作成一个npm包！

 

最初本身作的时候就是这种直接引入封装的JS文件里，能够参考： https://github.com/saucxs/watermark

 

1、准备工做

一、将npm包的镜像换成   https://www.npmjs.com/

npm config set registry https://www.npmjs.com/

由于这个官方npm加载速度慢，以后再切换回来

npm config set registry https://registry.npm.taobao.org

二、本身电脑不是adminstrator权限，请切换到administrator用户。这个不须要告诉你怎么切换用户吧

三、注册一个npm帐号

注册地址：https://www.npmjs.com/

 

2、初始化要封装的包

一、择一个文件夹，而后用命令行 cd进去

npm init

接下来就是一长串表单：

• name：填写你这个包的名字，默认是你这个文件夹的名字。不过这里要着重说一下，最好先去npm上找一下有没有同名的包。最好的测试方式就是，在命令行里面输入npm install 你要取的名字，若是报错，那么很好，npm上没有跟你同名的包，你能够放心大胆地把包发布出去。若是成功下载下来了。。。那么很不幸，更名字吧。。。
• version：你这个包的版本，默认是1.0.0
• description：这个用一句话描述你的包是干吗用的，好比我就直接：‘watermark for dom’
• entry point：入口文件，默认是Index.js，你也能够本身填写你本身的文件名
• test command：测试命令，这个直接回车就行了，由于目前还不须要这个。
• git repository：这个是git仓库地址，若是你的包是先放到github上或者其余git仓库里，这时候你的文件夹里面会存在一个隐藏的.git目录，npm会读到这个目录做为这一项的默认值。若是没有的话，直接回车继续。
• keyword：这个是一个重点，这个关系到有多少人会搜到你的npm包。尽可能使用贴切的关键字做为这个包的索引。我这个包嘛，第一是在express下工做的，而后又是一个插件plugin，而后又是一个注册路由route用的，而这个路由又是基于文件目录dir，因此很好就得出个人包的索引关键字。
• author：写你的帐号或者你的github帐号吧
• license：这个直接回车，开源文件来着。。。

PS：你能够一直回车，以后再packjson里进行编辑这个表单。

 

二、而后，在目录下新建一个index.js文件，或者你刚才修改了那个entry point的值，那么你这个文件名也跟着改成那个值。

这个index.js里面我放了一个压缩的index.min.js。

 

 三、而后，最重要的，写好README.md，一个给你们描述你的包的markdown文件，若是你们都不知道你的代码是作什么的，会有人去下载你的代码吗？哦，对了，最好写英文。我这里写了一套英文版的使用文档和一套中文版的使用文档。

 

 

3、npm命令登陆

 接下来就是：用npm命令登录一下：

npm login

登陆的是本身注册的用户名和密码。

PS：或者使用添加npm用户

npm adduser

 

4、npm发布到官方网上

而后，在你的目录下使用 npm publish

npm publish

PS :每一次发布新的一版，version版本要改变，否则npm会给我报错。通常状况下，一旦你要修改你已经发布后的代码，而后又要执行发布操做，务必到package.json里面，把version改一下，好比从1.0.0改成1.0.1，而后在执行npm publish，这样就能够成功发布了。

 

5、看一下发布的包

登陆本身的npm官方，就能够看到本身发布的包

 

6、如何使用watermark-dom包（最后边是最重要的）

npm包引入

        第一步：获取水印组件包： npm install  watermark-dom

        第二步：引入水印模块：import watermark from 'watermark-dom'

        第三步：在须要使用水印的页面js中调用水印初始化方法

                      watermark.init({ watermark_txt: "测试水印"});