制作自己的npm包插件流程步骤总结

 浆糊之家   2019-09-16 14:54   9 views 热度值  网名www.fybqq.com

1、先创建一个项目,npm init初始化一下,里面可以一路回车(等会直接去编辑package.json)

下面相关package.json文件内容参数介绍,制作npm包和常规开发项目还是点区别的,package.json文件内有些参数是必要的,并且每次发布新包到Npm上的时候,version版本号也是要变动的

 

2、初始化好后,做准备工作新建目录开发用,并且配置编译是用babel还是ts,我默认用的是ts编译的,所以在根目录中创建了tsconfig.json文件,以及安装好了typescript插件,

制作自己插件一路需要使用任何第三方插件,安装就完事了。

 

3、配置忽略上传到Npm包中的文件,创建.npmignore文件,里面配置你不想上传到npm包内的,一般是源文件不附带上去,只上传编译好后的文件目录,及根目录下的文件。

PS:用法同.gitignore配置样,过于简单就不细举例了。

 

4、此时准备工作完毕开始正式开发插件,比如你把你自己封装好的插件放到/src目录下,然后通过编译后到dist目录中去。

需要注意的是/src目录下一定要有一个入口文件,编译后的入口文件也是在dist目录下,所以在package.json中直接指定编译好的文件即可。

 

如果无从下手开发npm插件的话可以看我开发的一个小插件npm包仓库(可作参考) https://github.com/tec8297729/z-swagger-to-apidoc

 

5、开发完NPM插件包后,进入发布包阶段,命令行中输入 npm login 登录你的npm帐号(没有就注册一个)

 

6、登录成功后,输入npm publish 发布你的包。。。如果提示以下报错信息,那么就是你的npm帐号邮箱未验证通过,请先验证通过邮箱后才能发布npm包功能。

提交npm包报错.png

7、此时一切顺利的话,你的npm包已经发布线上,你可以npm上查询你的包,如果你想取消发布的话,输入 npm unpublish 取消发包,需要注意的是:此命令只有在你发布包后的24小时内有效

 

扩展功能:自动化发布npm包

制作插件的时候可以集成自动化CI测试、及自动化发布包功能,这次使用的是travis自动化测试平台(这个有很多教程就不细述了),话不多说实操代码

要根着下面步骤学习,前提一定要了解tarvis哦,可以先提前翻阅资料补一下知识点

1、在项目根目录下创建.travis.yml文件,配置自动化流程

 

2、进入travis官网启动监听的仓库,进入指定仓库右上角点击设置功能,设置脚本中的变量NPM_TOKEN值(一般隐私的值可以单独设置在另外地方,这样脚本对外不会暴露你重要的id或密码之类)

微信截图_20190917172507.png

 

进入设置页面有一处设置变量名的,设置好后就是如下效果

cjl107sb600040skhv0b4m4o8.png

 

这样每次在发包的时候就会自动发布到Npm上。

NEXT:已经是最新一篇了

 发表评论


表情

  1. Helenfah
    Helenfah 【活跃】 @回复

    你好!.

    我可以在哪里免费下载XEvil在您的网站?
    从你的支持得到的信息。 XEvil确实是解决验证码的最佳方案,但我需要最新版本。

    多謝。.