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 <[email protected]>",
    "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 [email protected] "这个包不再维护了。"

六、如何更新包

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

sh 复制代码

npm publish

七、总结

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