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

前言

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

一、准备工作

1. 官网注册

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

• 官网
• 创建账号入口

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

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

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

# 创建目录
mkdir js-util-libs

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

# 目录初始化
npm init

3. 文件内容及目录结构

package.json

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

{
    "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

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

// 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命令，添加用户信息。

npm adduser

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

2. 登录

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

npm login

3. 发布包

使用npm publish命令发布包。

npm publish

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

4. 注意事项

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

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

三、如何使用

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

npm i js-util-libs

在项目中导入使用：

// 引用
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中修改版本号，然后再次发布：

npm publish

七、总结

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

• js-util-libs的git仓库地址
• npm地址