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

相关推荐
软件技术NINI2 分钟前
娃娃店html+css 4页
前端·css·html
wordbaby9 分钟前
TanStack Router 路径参数(Path Params)速查表
前端
盟接之桥1 小时前
盟接之桥--说制造:从“找缝隙”到“一万米深”——庖丁解牛式的制造业精进之道
大数据·前端·数据库·人工智能·物联网·制造
明月5661 小时前
github开源项目推荐--drawnix(开源白板工具)
开源·github
巴拉巴拉~~1 小时前
Flutter 通用滑块组件 CommonSliderWidget:单值 / 范围 + 刻度 + 标签 + 样式自定义
开发语言·前端·javascript
韭菜炒大葱1 小时前
现代前端开发工程化:Vue3 + Vite 带你从 0 到 1 搭建 Vue3 项目🚀
前端·vue.js·vite
simplify201 小时前
SWEDeepDiver:从哪里来,去往何处
开源·llm
栀秋6661 小时前
面试常考的最长递增子序列(LIS),到底该怎么想、怎么写?
前端·javascript·算法
Melrose1 小时前
Flutter - 使用Jaspr来构建SEO友好网站
前端·flutter
有点笨的蛋1 小时前
Vue3 项目:宠物照片变身冰球运动员的 AI 应用
前端·vue.js