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包从 准备>>创建>>开发>>发布 的过程,是不是很简单,赶快动手试试吧

相关推荐
码云之上5 小时前
换模型之后,Chatbot 为什么要自己做 compact?
前端·agent·前端工程化
星栈5 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·agent·weui
研☆香5 小时前
简单的图片上传 删除 预览
前端
ITresearchGuest5 小时前
我用 AI 一小时写了一个世界杯数据可视化平台|前端 VibeCoding 初体验
前端·人工智能·信息可视化
冬奇Lab6 小时前
Code Agent 解剖(17):AgentTeams——消息怎么在 agent 之间传递?
人工智能·开源
冬奇Lab6 小时前
一天一个开源项目(第205篇):PenguinHarness - 让 AI 来构建 AI
人工智能·开源·资讯
慧一居士7 小时前
Vite项目中使用Less步骤,详细使用示例
前端·css
花间相见7 小时前
【LangChain组件03】—— LangChain Agents 执行与状态:工作流程与状态管理实战
java·前端·langchain
kyriewen7 小时前
面试官让我用 AI 重构一个 8 年陈的 React 组件——他说他不看代码,只看我会不会拆
前端·javascript·面试
计算机魔术师7 小时前
700吉瓦「幽灵用电」:美国AI数据中心的抢电闹剧正在失控
前端