npm发布自己的组件组件/插件包

前言

在项目开发过程中,我们经常会用到一些工具函数。虽然像lodash这样的库提供了丰富的功能,但其体积较大,有时我们更倾向于使用自己封装的轻量函数库。这篇博客将以创建并发布一个工具函数库为例,详细介绍如何在npm上发布自己的包。

一、准备工作

1. 官网注册

首先,需要在npm官网注册一个npm账户。

注意:注册后需要通过邮箱验证账户。

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

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

sh 复制代码
# 创建目录
mkdir js-util-libs

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

# 目录初始化
npm init
3. 文件内容及目录结构
package.json

package.json文件中,name字段的值应与项目名称一致。以下是一个示例:

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://registry.npmjs.org/"
    },
    "dependencies": {
        "jest": "^26.0.1"
    },
    "devDependencies": {
        "husky": "7.0.2"
    }
}
index.js

编写入口文件,导出需要的函数。以下是一个示例:

js 复制代码
// index.js
export { debounce, throttle } from "./src/throttle_debounce/index.js";
目录结构

项目的目录结构如下:

js-util-libs/
├── src/
│   └── throttle_debounce/
│       └── index.js
├── index.js
├── package.json
├── README.md

各文件的作用:

  • src/:存放工具函数。
  • index.js:入口文件。
  • package.json:npm包配置文件。
  • README.md:包说明文档。

二、如何发布

1. 添加用户

在项目根目录下运行npm adduser命令,添加用户信息。

sh 复制代码
npm adduser

如果已经注册过账号,直接登录即可。

2. 登录

运行npm login命令,输入用户名、密码、邮箱。

sh 复制代码
npm login
3. 发布包

使用npm publish命令发布包。

sh 复制代码
npm publish

发布完成后,可以在自己的npm包列表中看到发布的包,同时注册邮箱会收到发布成功的通知。

4. 注意事项

如果发布过程中遇到错误 npm ERR! code ENEEDAUTH,需要确保package.json中的publishConfig设置正确:

json 复制代码
"publishConfig": {
    "registry": "https://registry.npmjs.org/"
}

三、如何使用

现在,我们的包已经在npm上了,可以在项目中直接安装并使用。

sh 复制代码
npm i js-util-libs

在项目中导入使用:

js 复制代码
// 引用
import { deepCopy } from 'js-util-libs';

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

四、如何删除发布的包

如果发布的包不想用了,可以使用以下命令删除包:

sh 复制代码
npm --force unpublish js-util-libs

注意:超过24小时后不能删除包。

五、如何废弃包

可以标记包为废弃,用户在安装时会收到提示:

sh 复制代码
npm deprecate --force js-util-libs@1.0.0 "这个包不再维护了。"

六、如何更新包

需要先在package.json中修改版本号,然后再次发布:

sh 复制代码
npm publish

七、总结

本文介绍了如何创建并发布一个npm包的详细过程。你可以根据需要创建自己的函数库,并将其分享给更多人。

相关推荐
成富2 分钟前
文本转SQL(Text-to-SQL),场景介绍与 Spring AI 实现
数据库·人工智能·sql·spring·oracle
CSDN云计算15 分钟前
如何以开源加速AI企业落地,红帽带来新解法
人工智能·开源·openshift·红帽·instructlab
艾派森26 分钟前
大数据分析案例-基于随机森林算法的智能手机价格预测模型
人工智能·python·随机森林·机器学习·数据挖掘
hairenjing112328 分钟前
在 Android 手机上从SD 卡恢复数据的 6 个有效应用程序
android·人工智能·windows·macos·智能手机
小蜗子32 分钟前
Multi‐modal knowledge graph inference via media convergenceand logic rule
人工智能·知识图谱
SpikeKing1 小时前
LLM - 使用 LLaMA-Factory 微调大模型 环境配置与训练推理 教程 (1)
人工智能·llm·大语言模型·llama·环境配置·llamafactory·训练框架
黄焖鸡能干四碗1 小时前
信息化运维方案,实施方案,开发方案,信息中心安全运维资料(软件资料word)
大数据·人工智能·软件需求·设计规范·规格说明书
1 小时前
开源竞争-数据驱动成长-11/05-大专生的思考
人工智能·笔记·学习·算法·机器学习
ctrey_1 小时前
2024-11-4 学习人工智能的Day21 openCV(3)
人工智能·opencv·学习
攻城狮_Dream2 小时前
“探索未来医疗:生成式人工智能在医疗领域的革命性应用“
人工智能·设计·医疗·毕业