一秒学会在npm上,部署自己的包

153 阅读2分钟

1.下载 npm

更新 npm :  npm install npm@latest -g.

2. 在npm官网注册账号  www.npmjs.com/

3. 发布包

注册之后,新建一个空项目,我用的脚手架vueCLI创建的初始化项目

建立之后,在src目录下,新建如上图的文件

注意: 在src下新建一个文件夹之后,可以到当前目录下的终端输入

npm init

一路回车,就会在文件夹中,自动生成一个package.json文件

index.js文件配置

// 这个里面写的是自己封装的方法
/** * 判断字符串里面的字符出现的次数
 *  @return { obj } // 返回的最终计算对象
 *  @param { str } // 传入的字符串 
*/
function frequency(str) {  
str.split('').reduce((obj, it) => {  
  obj[it] = (obj[it] || 0) + 1 
// 每一次拿值,如果之前有值,就在之前的基础上+1 , 如果没有值,就是0 + +   
 return obj  }, {})}

main.js

const { frequency, arr2tree } = require('./utils/index')  // 引入
module.exports = {  //导出  frequency,  arr2tree}

package.json

{   
"name": "名字",   
"version": "1.0.1", //版本号    
"private": false,   
"author": "名字",    
"main": "main.js", // 查找入口文件    
"scripts": {       
"serve": "vue-cli-service serve",       
"build": "vue-cli-service build",        
"lint": "vue-cli-service lint",       
"build-bundle": "vue-cli-service build --target lib --name /包名/ ./src/packages/index.js"}
}

4.发布

首先要在终端登录刚刚注册的npm账号:

npm login
username: (注册的用户名)
password: (密码)
Email: (邮箱)
//回车之后,需要等待一会,输入邮箱发送的验证码

发布命令

npm publish

发布过程中出现的错误

// 出现403错误,就是你使用的NPM 

全局配置切换到官方源 npm config set registry https://registry.npmjs.org

全局配置切换到淘宝源 npm config set registry https://registry.npm.taobao.org  是淘宝镜像,
需要更换到官方源

切换源后,需要重新登录

npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/xxxxx - You do not have permission to publish "xxxxx". Are you logged in as the correct user?

包名错误,需要重命名你的package.json中的name。即使你在npm官网没有搜到你预设的包名,它可能也被发布占用过,需要修改你的包名。

记得更换package.json中的versions版本号

更新包/发布包

npm publish

 前段时间在写一个小项目,发现下的包很多都是个人封装的,所以想着自己也可以在npm上发布一下自己封装的工具包,就简单研究了一下,这不立马来给大家分享!