从来没有正式的去从头到尾的完整开发过一个npm包.所以这个周末,我突然来了兴趣,对原生video,audio的API以及原生事件写了一个扩展类,并发布到npm.整个过程可以说还是挺蛋疼的.这里分享一下
一、github创建项目仓库 第一步,从创建项目仓库开始,先去github按照步骤创建npm包的项目
虽然我知道99%的人都会,但是为了和我一样不会的同学,还是截了一张图
需要填个名称:repository name
然后选择add a README
选择Add .gitignore ———> 继续输入Node,选择node
文章图片
仓库创建好后,如下图把代码拉下来
这里可以选择HTTPS,也可以SSH.区别在于HTTPS再clone代码的时候,需要登陆账号,而SSH不需要登陆.但是需要提前配置公钥和私钥.如果你还是学习中,不清楚区别,建议暂时先使用HTTPS
文章图片
然后去控制台,输入命令git clone + 刚才复制来的地址
git clone + 复制来的clone地址
代码拉好之后,在命令行使用npm init初始化一个package.json文件出来.根据步骤一步步设置,如果不想设置,一律回车
然后你会得到一个这样的文件
文章图片
name: 在后面调试的时候会用到,直接起包的名字就可以,但是npm包的名字不能乱取,要保证包名的唯一性.这玩意就像注册商标一样,人家用了,你就不能再用了.所以,先去npm的网站去搜索一下,看看有没有同名的包.
对,就是进入页面那个最大的输入框就是!!
version: 这个就是你包的版本号,每一次发布npm包的时候,需要更新版本,否则发布失败.这个需要注意
description: 顾名思义,就是包的描述,如果你希望别人也可以用到你的包,那还是稍微介绍一下你的程序吧
main: npm发布时的主体文件,默认是项目根目录. 这里index.js,那么你的项目入口就得是index.js.
好到这里,准备工作先暂时告一段落. 然后进入下一步
注册NPM账号 项目工程的前期准备结束后, 我们需要去准备npm发布的事宜了.首先就是要去NPM注册账号
邮箱验证 注册好账号后,你所填写的邮箱,会收到一封验证email,这里一定一定要先验证,验证通过后,后面才可以发布npm包.否则会包403或者401的错误!!!
开发项目 到此为止,前期的准备工作基本完成,然后就可以进入到,大家熟悉的开发环节, 该上脚手架就上,该创建配置项就创建.开始开发.
至于为什么要单列这一步出来,是因为我有几个提醒
1、开发前要考虑好,你的npm包的用途,是要放到哪里用,用的环境是什么,如果是自己玩就无所谓,但是如果是js环境中使用,那么如果你的包是ts开发的,那么就少不了loader打包转译.比如你还使用了css预处理器之类的东西,那么就是同样的道理
2、如果是一个体量很小的项目,不想进行复杂的大包编译的配置,或者接入过重的脚手架,那么你需要注意,尽量使用es5的语法进行开发,以免在es5项目中,无法使用的兼容问题
项目调试 开发过程中,需要对项目进行调试,这个时候我们可以时候,可以使用npm link来进行调试,具体方式如下
cd 进入包项目根目录, 命令行执行 npm link. 将该项目映射到全局
npm link
cd 进入需要使用这个包的项目的根目录, 执行npm link + package名称 将刚才映射到全局的包装到当前项目的node_modules文件夹.这个时候,你就可以在这个项目中,引用使用你开发的npm包啦. 这里要注意的是,package名称,就是前文提到的,package.json中第一行的name
npm link + package名称
一般来说只要你没有看到报错,就是link成功啦
当你调试结束时,可以通过npm unlink + package名称的方式,删除安装到node_modules的包.记得要删除!!! 因为这个并不是真正的npm包, 删除之后, 将npm发布后,再通过npm install安装,重新测试没有问题后,才算是真正的结束
npm发布 当你前面的所有事情都做好之后,就进入到npm发布的这一步了
首先,需要登陆一下npm账号,命令行执行:
npm adduser
之后填写你的npm账号和密码
这里可能会出现403之类的报错,也可能是其他报错.一般来说,可能的原因是,你的npm源不是npm本来的源; 如果没有报错,请跳过nrm这一步
这里额外的补充一下, 你可以安装一个nrm来管理npm源,执行下面的命令,全局安装
npm i nrm -g
可以先查看当前使用的npm源
nrm ls
切换源
nrm use + 源名称(这个名称就是刚才nrm ls出现列表中的名称)
所以为了让我们的包可以发布成功,这里我们必须使用npm的源才可以所以需要执行
nrm use npm
之后重复npm adduser
当你登陆成功,npm源也没有问题的时候,你就可以执行
npm publish
如果这个时候,没有看到报错,那么恭喜你,你可以去这里搜索一下你包的名称,你就可以找到你发布的包啦
安装你的npm包 另外创建一个项目,或者使用现成的其他项目.通过执行npm i + 你的包名称 + -S来安装你刚刚发布的npm包吧.安装好后,你可以再次进行测试.
【前端工程化|如何开发npm包,并发布到npm的详细介绍】整个过程到此基本结束
