微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JS高级—16—包管理工具

一、代码共享方案

 

 二、npm

 使用npm来管理我们的模块,如果需要使用直接使用npm即可,类似java的maven,如果想看源码再去github找;

 

npm网页:一个是回去搜索registry仓库里所有包的web网页;

npm registry:一个是存储所有代码的仓库;

2.1npm 的配置文件

 

 

 

2.2npm配置文件属性

 

 

main属性指定了,我们写的这个模块,哪一个文件是我们的入口文件;比如说main属性指定为foo.js;

比如说其他调用者通过import  foo from ‘axios’的方法调用;(其实webpack是去找import  foo from ‘axios/foo.js’)

 

 

 peerDependancy:表示对等的依赖,安装我这个模块时先检查调用者项目里是否安装了peerDependancy里的包,如果有的话我这个模块才能正常使用;

比如安装element-plus需要的对等依赖时vue3,不然安装element-plus无法使用;

 

 

 

 

 

 

 

2.3npm的版本管理

 

 

2.4npm install的原理

 

 

 

 

 

 

package—lock.json的作用:

第一:有了package—lock.json,会记录真实的版本号,在npminstall的时候会安装这个真实的版本号,如果没有,可能会根据package.json文件安装,那^2.03可能就会安装为2.9.9,可能会导致一些异常;

第二:有了package—lock.json,在npminstall的时候会先检查是否依赖一致,即npminstall制定的版本和package—lock.json里记录的版本是否一致,如果一致可以查找本地时候有已安装的包的缓存,加快我们的安装速度;

 

 

 2.5npm其他命令

有的时候本地缓存文件可能已经被破坏了,但是npm仍然从本地缓存去文件,所有就会有问题,我们可以用这个命令重新安装本地缓存;

然后把node_modules文件删除了,然后再把本地缓存解压缩到node_modules;

 

 

 npx命令

 

 

 

 

 

 

2.6cnpm

可以npm的源还是官方原,但是安装个cnpm并把cnpm的源改成淘宝源,如果以后npm下载不了的东西,再用cnpm下载;

 

 

 

 

三、自己发布npm包

注意,发布自己的包,必须保证npm 的registry时官方源而不是淘宝源;

检查这个包是否已经有人起了这个名字:npm view package-names (如果觉得输出太长,可以使用:npm view package-names version)

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐