Node.js开发属于自己的npm包(发布到npm官网)

在 Node.js 中开发并发布自己的 npm 包是一个非常好的练习,可以帮助我们更好地理解模块化编程和包管理工具,本篇文章主要阐述如何使用nodejs开发一个属于自己的npm包,并且将其发布在npm官网。在开始之前确保已经安装了 Node.js 和 npm。可以在cmd命令行中运行 node -vnpm -v 来检查它们的版本,我这里使用的是nvm。

目录

一、初始化包的基本结构

二、开发包的基本流程

1.包的功能

2.开发包流程

[2.1 创建根目录](#2.1 创建根目录)

[2.2 创建其他文件](#2.2 创建其他文件)

[2.3 初始化package.json](#2.3 初始化package.json)

[2.4 开发功能](#2.4 开发功能)

[2.5 整合包的入口文件](#2.5 整合包的入口文件)

[2.6 编写包的说明文档](#2.6 编写包的说明文档)

三、发布包

1.注册账号

2.登录账号

3.发布包

4.查看包

四、删除包


一、初始化包的基本结构

一个规范的包,他必须包含以下基本结构:

(1)**独立的目录结构:**包必须以一个独立的目录形式存在,这是包的基本组织单元。该目录应包含包的所有相关文件和子目录,以便于管理和分发。

(2)package.json 配置文件: 在包的顶级目录中,必须存在一个名为 package.json 的文件。该文件是 Node.js 包的核心配置文件,用于定义包的元数据、依赖关系及其他重要信息。

package.json配置:

|-------------|-------------------------------|
| 名称 | 功能 |
| name | npm服务器上面的包名(这个名字和文件夹的名字可以不一致) |
| version | 包的版本号 |
| description | npm官网上面查找的时候,搜素框下面提示框所显示的简介 |
| main | 包的入口 |
| keywords | 包的查找关键词 |
| license | 所遵守的开源许可协议 |

(3)**index.js文件:**这是包的入口文件。

(4)**README.md:**包的说明文档--官网上面也会以网页的形式展现出来的。

二、开发包的基本流程

1.包的功能

  • 格式化日期:将日期转为特定字符串格式,如ISO 8601或自定义。
  • 转义 HTML 特殊字符:转换<、>等字符为HTML实体,防解析错误。
  • 还原 HTML 特殊字符:将HTML实体转换回原字符,恢复文本原貌。

2.开发包流程

2.1 创建根目录

新建timeEscape-tools文件夹,作为包的根目录。

2.2 创建其他文件

在新建的文件夹下,创建以下文件夹和文件,包含src文件夹、package.json文件、index.js文件及README.md

2.3 初始化package.json

在package.json文件中书写以下代码,注意:下方的代码中除了名称不变,其余的可根据需要进行修改。

复制代码
{
    "name":"timeescape-tools",
    "version":"1.0.0",
    "description":"提供了格式化时间,HTMLEscape相关的功能",
    "main":"index.js",
    "keywords": ["date", "format", "html", "escape"],
    "license":"ISC"
}

2.4 开发功能

对于包的功能我们将其文件建立在src文件夹下,如下在src文件夹中创建dateFormat和htmlEscape文件。

(1)dateFormat.js中定义格式化时间的方法

复制代码
//定义格式化时间的函数
function dateFormat(date) { 
    const dt = new Date(date);
    //年
    const year = zeroPad(dt.getFullYear());
    const month = zeroPad(dt.getMonth() + 1);
    //日
    const day = zeroPad(dt.getDate());
    //时
    const hour = zeroPad(dt.getHours());
    //分
    const minute = zeroPad(dt.getMinutes());
    //秒
    const second = zeroPad(dt.getSeconds());    
    //返回格式化后的时间字符串
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
//定义一个补零的函数
function zeroPad(num) {
   return num>9?num:'0'+num;
}
module.exports = {
    dateFormat
}

(2)htmlEscape.js中定义转义和还原HTML的方法

复制代码
//定义转义HTML字符的函数
function escapeHtml(str) {
    return str.replace(/<|>|"|&/g, (match) => { 
        switch (match) {
            case '<':
                return '&lt;';
            case '>':
                return '&gt;';
            case '"':
                return '&quot;';
            case '&':
                return '&amp;';
            default:
                return match;
        }
    })
}
//定义还原HTML字符的函数
function unescapeHtml(str) {
    return str.replace(/&lt;|&gt;|&quot;|&amp;/g, (match) => { 
        switch (match) {
            case '&lt;':
                return '<';
            case '&gt;':
                return '>';
            case '&quot;':
                return '"';
            case '&amp;':
                return '&';
            default:
                return match;
        }
    })
}
module.exports = {
    escapeHtml,
    unescapeHtml
}

2.5 整合包的入口文件

在index.js文件中引入上述开发功能的文件,并且将其向外暴露出去。

复制代码
const date = require('./src/dateFormat')
const escape=require('./src/htmlEscape')
//向外暴露
module.exports = {
    ...date,
    ...escape
}

2.6 编写包的说明文档

以上步骤操作完之后,就可以来书写介绍文档了

复制代码
<!--
 * @Description: timeEscape-tools使用文档介绍
-->
##安装
```
npm install timeEscape-tools
```
##导入
```js
const timeEscape = require('timeEscape-tools');
```
##使用--格式化时间
```js

// 调用dateFormat对时间进行格式化
const timeStr = timeEscape.dateFormat(new Date());
console.log(timeStr); // 2021-01-28 11:18:31
```

##使用--转义HTML中的特殊字符
```js
// 调用escapeHTML对HTML中的特殊字符进行转义
const htmlStr = '<div>Hello, world!</div>';
const escapedHtmlStr = timeEscape.escapeHtml(htmlStr);
console.log(escapedHtmlStr); // &lt;div&gt;Hello, world!&lt;/div&gt;
```
##使用--解码HTML中的特殊字符
```js
// 调用unescapeHTML对HTML中的特殊字符进行解码
const escapedHtmlStr = '&lt;div&gt;Hello, world!&lt;/div&gt;';
const htmlStr = timeEscape.unescapeHtml(escapedHtmlStr);
console.log(htmlStr); // <div>Hello, world!</div>
``` 
##开源协议
ISC

三、发布包

1.注册账号

访问https://www.npmjs.com/网站,点击"sign up"按钮进入注册页面,按照提示填写相关信息以注册个人npm账号。

2.登录账号

在以上注册账号的步骤操作完成后,可以在终端中 执行 npm login 命令进行登录。这里需要注意一点在执行 npm login 命令之前,必须先把下包的服务器地址切换为 npm 的官方服务器 。否则会导致登录失败!

由于我在执行此命令前未更换,导致出现以下错误:Public registration is not allowed

解决方式 :在终端中执行以下命令,将自己的npm镜像源改为npm的https://registry.npmjs.org/这个,注意:(发布完后 切换:npm config set registry https://registry.npmmirror.com,避免npm install报错)

复制代码
npm config set registry https://registry.npmjs.org

3.发布包

在终端中切换到包的根目录,运行npm publish发布npm包。注意,包名需唯一,避免与现有包重复。如有不确定,可先在https://www.npmjs.com/搜索确认包名是否重复。

4.查看包

在npm官网上查看包是否发布成功,登录自己的npm账号,然后点击头像,选择packages即可查看。

四、删除包

如若想要删除自己所发布的包,需在终端运行包名 --force命令,即可从npm删除已发布的包。

复制代码
npm unpublish timeEscape-tools --force

注意:

  • npm unpublish 命令只能测除 72 小时以内发布的包,
  • npm unpublish 别酸的包,在 24 小时内不允许重复发布
相关推荐
代码搬运媛21 小时前
Jest 测试框架详解与实现指南
前端
counterxing21 小时前
Agent 跑起来之后,难的是复用、观测和评测
node.js·agent·ai编程
counterxing1 天前
我把 Codex 里的 Skills 做成了一个 MCP,还支持分享
前端·agent·ai编程
wangqiaowq1 天前
windows下nginx的安装
linux·服务器·前端
之歆1 天前
DAY_12JavaScript DOM 完全指南(二):实战与性能篇
开发语言·前端·javascript·ecmascript
发现一只大呆瓜1 天前
Vite凭什么这么快?3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Maimai108081 天前
React如何用 @microsoft/fetch-event-source 落地 SSE:比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
kyriewen1 天前
产品经理把PRD写成“天书”,我用AI半小时重写了一遍,他当场愣住
前端·ai编程·cursor
humcomm1 天前
元框架的工作原理详解
前端·前端框架
canonical_entropy1 天前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程