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

相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
ajassi20004 小时前
开源 C++ QT Widget 开发(十五)多媒体--音频播放
linux·c++·qt·开源
兆龙电子单片机设计4 小时前
【STM32项目开源】STM32单片机智能恒温箱控制系统
stm32·单片机·物联网·开源·毕业设计
大写-凌祁4 小时前
零基础入门深度学习:从理论到实战,GitHub+开源资源全指南(2025最新版)
人工智能·深度学习·开源·github
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3