npm包从创建到发布的基础流程概述

一、准备工作

这里以npm官网为准

  1. 创建账号:登录官网www.npmjs.com/ 进行账号注册
  2. 本地登录验证:登录指令:npm login;验证是否登录成功指令:npm whoami(显示账号名即登录成功)

二、编码

项目初始化

指令:npm init

初始化git仓库

指令:git init

创建基础目录结构

指令:指令:mkdir src, test, docs, examples

手动创建的文件:

  • .gitignore
  • .npmignore
  • README.md
  • LICENSE
  • src/index.js (主入口文件)
  • test/index.test.js (测试文件)

package.json基础配置

javascript 复制代码
{
  "name": "npm-demo",//npm包名
  "version": "0.0.1",//版本号
  "description": "这是一个demo样例的npm包描述",//npm包介绍
  "main": "index.js",//入口文件
  "type": "module",//npm包使用模式,这里采用ES Modules,没有type指明,默认使用CommonJS模式
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "慰尘",//作者
  "license": "ISC"
}

开发

基础目录创建完成后即可进行功能开发,并且可以在指定项目中运行检验本地npm包的功能,方法如下:

  1. npm link 方法(推荐) 这是最常用的本地开发测试方法:
bash 复制代码
# 在您的包目录中创建全局链接
cd /path/to/w_npm1
npm link

# 在测试项目中使用这个链接
cd /path/to/test-project
npm link w_npm1

这样您的测试项目就会使用本地开发中的包版本,当您修改包代码时,变更会立即生效。

  1. 使用本地路径安装 在测试项目的package.json中直接引用本地包:
json 复制代码
{
  "dependencies": {
    "w_npm1": "file:../path/to/w_npm1"
  }
}

然后运行 npm install 安装本地包。

构建部署

打包构建

此步骤后面再讲

发布npm包

1、先验证npm包名是否已存在

指令:npm view "包名",如果有包描述信息则说明包名已被使用,如果出现404报错则说明包名没被使用,效果如图 2、发布npm包 指令:npm publish

验证npm包

在npm搜npm包名看能否搜到

npm包发布到多个npm源指南

1、首先在对应的源注册账号

2、切换本地npm源

3、npm登录

4、发布npm包

总结

至此便是一个npm包从 准备>>创建>>开发>>发布 的过程,是不是很简单,赶快动手试试吧

相关推荐
天蓝色的鱼鱼21 分钟前
关于 CSS 你可能不知道的属性,但关键时刻很有用
前端·css
泯泷1 小时前
第 2 篇:设计第一套字节码:Opcode、Instruction 与 Constant Pool
前端·javascript·安全
妙码生花1 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十五):优化细节、网络请求封装
前端·后端·ai编程
泯泷1 小时前
第 1 篇:从 1 + 2 开始:亲手写出第一台 JSVM
前端·javascript·安全
团团崽_七分甜1 小时前
Spring Boot 核心知识点总结
前端
ZzT2 小时前
在 GitHub 上 @一下 claude,它自己把 issue 改成 PR
人工智能·开源
lichenyang4532 小时前
从一个按钮开始,理解 ASCF 框架到底在做什么
前端
古夕2 小时前
第三方 SSO 接入实践:redirect_uri 编码、回调一致性与跨项目联调
前端·vue.js
朦胧之2 小时前
页面白屏卡住排查方法
前端·javascript
用户593608741402 小时前
Playwright 黑魔法:用 ClipboardEvent 绕过 React 富文本编辑器
前端