如何发布自己的npm包

时间:2024-01-27 14:02:47

目录

前言

一、准备工作 

 1.官网注册

 2.创建函数库目录以及初始化

 3.文件内容及目录结构

package.json

index.js

目录结构

 二、如何发布

1.添加用户

2.登录

3.发布包

4.注意

 三、如何使用

四、如何删除发布的包

五、如何废弃包

六、如何更新包

 七、总结

往期回顾


前言

在项目开发过程中,我们经常会用到一些工具函数,使用很是频繁,但是呢,我们又不想使用loadash这种比较重的库函数,这时候我们就可以封装一个自己的函数库,包含了我们频繁使用的工具函数,函数封装好,那么怎么去上传到npm上呢?今天我们来上传一个工具函数库为例,详细说下npm发布包的流程。

一、准备工作 

 1.官网注册

首先要在npm官网注册自己的npm账户。

官网:https://www.npmjs.com/

创建账号入口:https://www.npmjs.com/signup

注意点: 创建需要进入邮箱验证

 2.创建函数库目录以及初始化

创建好账号后,我们来新建初始化自己函数库目录

## 创建目录
mkdir js-util-libs

## 进入目录
cd js-util-libs/

## 目录初始化
npm init

3.文件内容及目录结构

 package.json

 文件的name的名称和项目的名称保持一至,以下是我的package.json的参考

{
    "name": "js-util-libs",
    "description": "js常见的函数工具库",
    "version": "1.2.5",
    "author": "fuzhaoyang <932647051@qq.com>",
    "license": "MIT",
    "main": "index.js",
    "files": [
        "index.js",
        "src"
    ],
    "private": false,
    "scripts": {
        "test": "jest",
        "watch": "jest --watchAll",
        "coverage": "jest --coverage"
    },
    "keywords": [
        "js-util-libs",
        "debounce",
        "throttle",
    ],
    "homepage": "https://github.com/fuzhaoyang/js-util-libs.git",
    "repository": {
        "type": "git",
        "url": "git+https://github.com/fuzhaoyang/js-util-libs.git"
    },
    "publishConfig": {
        "registry": "https://npm.pkg.github.com/js-util-libs"
    },
    "dependencies": {
        "jest": "^26.0.1"
    },
    "devDependencies": {
        "husky": "7.0.2"
    }
}

index.js

入口文件编写,我们写一个导出函数,以下参考

// 防抖节流
export { debounce, throttle }
from "./src/throttle_debounce/index.js";

目录结构

最终的目录大致是以下这样子。

目录说明:

文件名 说明
src 存放函数工具函数(根据自己的需要新建层次)
index.js 入口文件(必要文件

package.json

npm相关包(必要文件
README.md 包说明

npm函数库package.json文件参数有疑问的,可以下载博主的函数作为参考模板使用,

git链接:https://github.com/fuzhaoyang/js-util-libs

 二、如何发布

1.添加用户

进入到项目根目录下,运行npm addUser命令,添加自己的用户信息

npm addUser

如果已经注册过账号,直接登录就行了。

2.登录

npm login

输入用户名、密码、邮箱 。

3.发布包

npm publish

发布完成后,在自己的package里,会看到对应的包。

同时你发布时填的邮箱也就收到发布成功的消息啦! 

4.注意

如果在npm publish发包过程中遇到这样的错误npm ERR! code ENEEDAUTH
npm ERR! need auth This command requires you to be logged in to https://npm.pkg.github.com/js-util-libs
npm ERR! need auth You need to authorize this machine using `npm adduser`

 但是我明明已经登录了,后来经过查询是之前的配置发生了变化.

原先的package.json 中publishConfig的设置

  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }

现在正确的配置

  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  }

 三、如何使用

现在我们的包已经在npm上面了,我们可以直接使用了,找一个项目,直接在项目里下载

npm i js-util-libs

那么package.json里就会新增我们的包

现在我们在项目里导入使用 

// 引用
import { deepCopy } from 'js-util-libs';

// 使用
const obj = {
  aa: 1,
  b: '52'
};
const text = deepCopy(obj);

四、如何删除发布的包

呀!如果我们搞错了,发布的包不想用了,该怎么去删除包呢?

npm --force unpublish js-util-libs

注意:超过24小时就不能删除了。

五、如何废弃包

这个包并不会删除,只是在别人下载使用的时候会提示

npm deprecate --force js-util-libs@1.0.0 "这个包不在维护了。"

六、如何更新包

需要先把package.json里的version版本号修改了,再执行publish命令就行了

npm publish

 七、总结

文中 js-util-libs的git仓库地址:https://github.com/fuzhaoyang/js-util-libs

npm地址: https://www.npmjs.com/package/js-util-libs

到此关于如何在npm上传自己的包的文章就介绍到这了 ,你掌握了上传的方法了吗?欢迎在评论区交流。如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下!博主会持续更新。。。。

我的博客:https://code-nav.top/blog

往期回顾

 css实现元素居中的6种方法 

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略(面试一网打尽)!

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些?

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击?什么是 CSRF?什么是点击劫持?如何防御