在npm上发布自己的包
写包的初衷
项目中很多地方用到相同的代码段,做其他项目的时候,也会用到这个功能,于是,大哥让我写一个包,供目前以及以后的项目使用
提供的功能
在机器之心这个页面,上面的nav会根据滚动条的位置进而改变active状态,同时,点击nav中的每个链接,页面也会滚动到相应的section。这个功能很常见。
目前,包提供的两种形式:
- 使用锚链接:你通过点击nav中的链接,通过锚点来使页面滚动到相应的section;同时,滚动条的位置改变时,会更改页面的hash,nav的active也会改变。
- 使用点击事件:你通过点击nav中的链接,通过获得元素的data-index来确定相应的section,所以你必须为nav中的item添加data-index属性;同时,滚动条的位置改变时,nav的active也会改变。
项目的地址
点击这去仓库
具体的参数请查看readme
项目发布的过程
- 新建一个文件夹,
npm init
来填写包的信息 - 编写代码
- 完成代码编写,若你使用ES6或者ES7的语法,需要使用babel转换一下
npm login
npm publish
- 到这你的包发布成功,若更新包,记得要改package.json中的version
遇到的坑
- 完成代码编写后,直接发布了,使用的时候报错:import那报错;我以为是因为没有因为代码压缩,于是进行了代码的压缩,发现并没有什么软用;因为项目使用webpack打包,就想是不是因为没有打包,于是就开始了打包,结果项目还是报错。边上网边查,我还以为是代码写错了…;最后,看了其他包的样子,发现是使用babel打包的,解决了这个大问题。
- 若你安装不上一个包,报错说是因为名字重复了:不是文件夹的名字和包的名字重复了,而是你的项目的package.json中的name和包的名字重复了…
- 自己坑自己,代码变量拼写错误,最近老是犯这个错误😔
终结~