npm包的上传和使用,nrm的使用介绍
假设公司当前有个npm私库:http://npm.abc.cn
根据以下步骤进行分享:
- 介绍简单包的制作,作为上传前的文件准备
- npm登录
- 发布刚刚制作的包
- 在项目中引入发布的包
- 删除发布的包
- nrm介绍及使用
一、简单包的制作
①:新建一个文件夹
②:进入文件夹并初始化npm
成功后会生成一个package.json文件
③:创建一个app.vue页面和index.js
app.vue
1 <template> 2 <div class="">{{text}}</div> 3 </template> 4 5 6 <script> 7 8 export default { 9 name: 'Test', 10 components: {}, 11 props: { 12 text: { 13 type: String, 14 default: '' 15 } 16 }, 17 data() { 18 return { 19 }; 20 }, 21 computed: {}, 22 watch: {}, 23 methods: {}, 24 created() {}, 25 mounted() {}, 26 }; 27 </script> 28 <style lang='scss' scoped> 29 </style>
index.js
1 import text from './app.vue' 2 export default text
此例子是接收一个字符串并暴露出来
至此,简单的包制作完成。
二、npm登录
npm登录指令:npm login
登录公司私库:npm login --registry http://npm.abc.cn
登陆成功。
注意:输入密码是没有显示的,闭着眼输,对就对,错就重新来。
三、发布刚刚制作的包
发布指令:npm publish
发布到公司私库:npm publish --registry http://npm.abc.cn
发布一定要注意改版本号。
简单说明一下版本号:版本号由3部分构成大版本号、小版本号和补丁修复版本号。
比方说:1.2.3中1是大版本号,除非很大改动,才会改这个版本号。2是小版本号,正常迭代会改动到此版本号,3是补丁修复和优化等,有小改动,都在此地方修改
版本号前面通常有2个常见的字符~和^,没有的话表示固定版本
~会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括1.3.0
^会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3.0,但是不包括2.0.0
在引用包的时候,根据情况,可以进行适当使用前缀。
如遇下面报错,检查一下登录是否正确检查下镜像代理,检查下包名在npm官网是不是已经存在了
我们换个名字再次发布
发布成功,去npm看看
四、在项目中使用
①:安装npm install wuzhiquan-npm-test --save(cnpm install wuzhiquan-npm-test --save)
安装成功。
②:引入并调用
1 <template> 2 <div id="app"> 3 <test :text="'我叫吴之全'"/> 4 </div> 5 </template> 6 7 8 <script> 9 import test from 'wuzhiquan-npm-test' 10 11 export default { 12 name: 'App', 13 components: { 14 test 15 } 16 } 17 </script> 18 19 <style> 20 </style>
成功输出
五、删除发布的包
删除指令:npm unpublish wuzhiquan-npm-test --force
删除公司私库的包:npm unpublish wuzhiquan-npm-test --force --registry http://npm.abc.cn
删除成功,去npm看看
六、nrm介绍及使用
nrm 是一个 npm 源管理器,允许你快速地在 npm源间切换。当然,不使用nrm也能切换源:npm set registry https://registry.npm.taobao.org/,但是如果频繁切来切去,增加操作的同时,地址难免也会不出错。还是使用管理器更加方便
首先需要全局安装:npm install -g nrm(cnpm install -g nrm)
常见指令:
①:查看可选源:nrm ls,带*表示当前使用的源
②:查看当前使用源:nrm current
③:切换源:npm user <registry>,<registry>为源名
④:添加源:nrm add <registry> <url>, <registry>为源名,<url>为地址
⑤:删除源:nrm del <registry>,<registry>为源名
⑥:测试源响应时间、访问速度:nrm test <registry>,<registry>为源名
经测试,taobao源比npm源要快