我们已经实现了路由的自动化构建,但是我们可以看到,一大串代码怼在里面。当然你也可以说,把它封装在一个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

2、自己电脑不是adminstrator权限,请切换到administrator用户。这个不需要告诉你怎么切换用户吧

3、注册一个npm账号

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

 
二、初始化要封装的包
1、择一个文件夹,然后用命令行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里进行编辑这个表单。

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

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

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

登录的是自己注册的用户名和密码。

PS:或者使用添加npm用户

npm adduser

四、npm发布到官方网上

然后,在你的目录下使用npm publish

npm publish

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

 
五、看一下发布的包
登录自己的npm官方,就可以看到自己发布的包

六、如何使用watermark-dom包(最后边是最重要的

npm包引入

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

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

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

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

手把手教你用npm发布一个包,详细教程的更多相关文章

  1. 手把手教你搭建Pytest+Allure2.X环境详细教程,生成让你一见钟情的测试报告(非常详细,非常实用)

    简介 宏哥之前在做接口自动化的时候,用的测试报告是HTMLTestRunner,虽说自定义模板后能满足基本诉求,但是仍显得不够档次,高端,大气,遂想用其他优秀的report框架替换之.一次偶然的机会, ...

  2. 手把手教你Pytest+Allure2.X定制报告详细教程,给自己的项目量身打造一套测试报告-02(非常详细,非常实用)

    简介 前边一篇文章是分享如何搭建pytest+Allure的环境,从而生成一份精美的.让人耳目一新的测试报告,但是有的小伙伴或者童鞋们可能会问,我能不能按照自己的想法为我的项目测试结果量身打造一份属于 ...

  3. 怎么用npm发布一个包,详细教程

    我们已经实现了路由的自动化构建,但是我们可以看到,一大串代码怼在里面.当然你也可以说,把它封装在一个JS文件里面,然后使用require('./autoRoute.js')给引入进来,那也行.但是,为 ...

  4. 在pypi上发布python包详细教程

    使用Python编程中Python的包安装非常方便,一般都是可以pip来安装搞定:pip install <package name>,我们自己写的python也可以发布在pypi上,很简 ...

  5. 手把手教你安装Eclipse最新版本的详细教程 - 大佬的鸡肋,菜鸟的盛宴(非常详细,非常实用)

    简介 首先声明此篇文章主要是针对测试菜鸟或者刚刚入门的小伙们或者童鞋们,大佬就没有必要往下看了. 写这篇文章的由来是因为后边要用这个工具,但是由于某些原因有部分小伙伴和童鞋们可能不会安装此工具,为了方 ...

  6. 用node发布一个包

    手把手教你用npm发布一个包 注:本文引用于简书 http://www.jianshu.com/p/36d3e0e00157   但是内容的话,还是一样的,也就是继续之前的工作,将那个autoRout ...

  7. 如何发布一个包到npm && 如何使用自己发布的npm包 && 如何更新发布到npm的package && 如何更新当前项目的包?

    如何发布一个包到npm First 在https://www.npmjs.com注册一个账号. Second 编辑好项目,文件大致如下: 其中,gitignore可以如下: .DS_Store nod ...

  8. 手把手教你用vue-cli构建一个简单的路由应用

    上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 开发环境搭建好之后,那么开始新添加一些页面,构建最基本的vue项目, ...

  9. 手把手教你使用 js 实现一个 Canvas 编辑器

    手把手教你使用 js 实现一个 Canvas 编辑器 拖拽 缩放,等比缩放 导出 image 模版 撤销,重做 OOP,封装,继承,多态 发布库 CI/CD (gitlab/github) ... h ...

随机推荐

  1. SQL菜鸟学习札记(二)

    五月份一直在写SQL,之后写了一个期末大作业的项目,现在才有时间把之前遇到的各种奇怪的问题整理出来.下一部分札记应该是大作业中使用到的SQL的整理. 一.UPDATE SET语句后面可以并列赋值. 之 ...

  2. JAVA实用案例之文件导入导出(POI方式)

    1.介绍 java实现文件的导入导出数据库,目前在大部分系统中是比较常见的功能了,今天写个小demo来理解其原理,没接触过的同学也可以看看参考下. 目前我所接触过的导入导出技术主要有POI和iRepo ...

  3. docker的简单搭建(java/tomcat 环境)

    1.一副图简单了解下docker的布局,它是虚拟的,docker分为私服.镜像.容器三个模块 一般从私服pull镜像,镜像run一个容器,我们把容器作为一个虚拟服务,里面可以独立运行进程有独立的内网I ...

  4. CyclicBarrier和CountDownLatch介绍

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp70 CyclicBarrier介绍 (一) 一个同步辅助类,它允许一组线 ...

  5. 怎么调用api接口

    api的简单调用,调用api的方法 方法一:用前端方法调用api 完整代码: <!DOCTYPE html> <html lang="en"> <he ...

  6. 结对编程1---基于Flask的四则运算题目生成器

    项目代码地址 / WEB应用地址 / 合作伙伴iFurySt博文链接 需求分析 本次程序是基于原有的控制台四则运算器的基础上,改成WEB的形式,同时还增加了一些新的功能.同时因为交互方式的改变,代码也 ...

  7. 团队作业10——Beta版本事后诸葛亮

    事后诸葛亮分析 1.总结的提纲内容: a. 项目管理之事后诸葛亮会议. 一.设想和目标 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件要解决的是教师需要 ...

  8. 团队作业4——第一次项目冲刺(Alpha版本)3rd day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 界面已初步完成并能够进行简单的界面关联 界面内的功能正在完善 2.登陆方面 QQ授权已申请,等待通过 申请通过后在登 ...

  9. 201521123109 《java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  10. 201521123121 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. Java流(Stream).文件(File)和IO Java.io包几乎包含了所有操作输入.输出需要的类.所有 ...