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

相关推荐
聆风吟º1 天前
CANN开源项目深度实践:基于amct-toolkit实现自动化模型量化与精度保障策略
运维·开源·自动化·cann
子兮曰1 天前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
冬奇Lab1 天前
一天一个开源项目(第15篇):MapToPoster - 用代码将城市地图转换为精美的海报设计
python·开源
吴仰晖1 天前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神1 天前
github发布pages的几种状态记录
前端
不像程序员的程序媛1 天前
Nginx日志切分
服务器·前端·nginx
北原_春希1 天前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
尽意啊1 天前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜1 天前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive1 天前
Vue3使用ECharts
前端·javascript·echarts