npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

study-npmpkg

v1.4.0

Published

开始之前先[注册一个 npm 账号](https://www.npmjs.com/)。

Readme

npm 包发布与管理

开始之前先注册一个 npm 账号

目录

  • 创建项目
  • 发布项目
  • 更新项目
  • 使用项目
  • 关联 github

创建项目

1、为了避免包名已被使用,可以提前在 npm 搜索包名是否存在

2、新建名为 study-npmpkg 的文件夹,也是你的包名

npm init -y

发布项目

1、先把 npm 源设置为默认的

npm config set registry=http://registry.npmjs.org

2、登录 npm 账号

npm login

3、发布

可使用 npm info 命令查看包的详细信息。

在 npm 官网搜索。

发布 403 报错。

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT http://registry.npmjs.org/study-npmpkg - Forbidden
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

解决方案:首次注册,没有验证邮箱,去邮箱按步验证,再次发布即可解决。

更新项目

package.json 中的 "main": "index.js" 是入口文件

新建 index.js,内容如下:

const text = 'study npmpkg';
export default text;

每次发包都要更新版本号,

npm version [<newversion> | major | minor | patch | premajor | preminor | 
prepatch | prerelease | from-git]

其语义为:

major:主版本号(大版本)
minor:次版本号(小更新)
patch:补丁号(补丁)
premajor:预备主版本
preminor: 预备次版本
prepatch:预备补丁版本
prerelease:预发布版本

这里执行 npm version minor,版本号从 1.0.0 变成 1.1.0

最后发布。

使用项目

1、安装依赖包

yarn add study-npmpkg

2、导入使用

import studynpmpkg from 'study-npmpkg';

<p>{studynpmpkg}</p>

关联 github

1、新建 github 仓库

然后复制地址,通过命令 git clone xx 拷贝到本地,

把之前的项目复制到这里,

2、repository

package.json 新增 "repository"

"repository": {
    "type": "git",
    "url": "[email protected]:xxx/study-npmpkg.git"
}

3、发布

修改版本号为 1.2.0,提交到 github,再执行 npm publish 发布。

可以看到关联地址了。

==注:其实更规范的流程是,每次发布版本前,先打 tag,再发布。==

参考 ant-design

参考