如何开发自己的npm包并上传到npm官网可以下载

目录

搭建文件结构

开始编写

发布到npm

如何下载我们发布的npm包


搭建文件结构

先创建新文件夹,按照下面的样子布局

  1. .├── README.md //说明文档

  2. ├── index.js //主入口

  3. ├── lib //功能文件

  4. └── tests //测试用例

然后再此根目录下初始化package包

bash 复制代码
npm init -y   //-y表示yes 可加可不加

会多出一个package.json文件

  1. ├── README.md //说明文档

  2. ├── index.js //主入口

  3. ├── lib //功能文件

  4. ├── package.json //包信息

  5. └── tests //测试用例


package.json

javascript 复制代码
{
  "name": "test",//名字
  "version": "1.0.0",
  "description": "", //介绍
  "main": "index.js",//主入口
  "directories": {
    "lib": "lib",
    "test": "tests"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [], //搜索关键字
  "author": "", //作者
  "license": "ISC"
}

一定记得再package.json中加上 "type":"module" 否者不能使用import

开始编写

我们在lib下面新创建功能性js文件

test1.js

javascript 复制代码
export function do11() {
    console.log("成功运行了!");
}

index.js中

javascript 复制代码
import {do11} from "./lib/test1.js"
export default {
    Do11: do11
}

再tests下创建测试文件test.js

test.js

javascript 复制代码
import obj from '../index.js'
obj.Do11()

运行test.js 成功


目前的整体文件结构

发布到npm

我们先需要在npm官网注册一个账号

npm官网


注册完成后再我们的根目录命令行输入

bash 复制代码
npm login

会让你输入用户名,密码,邮箱


随后会让你输入发送到你邮箱的一个验证码 然后结束登录操作
然后我们就可以输入

bash 复制代码
npm publish

来发布啦!

如何下载我们发布的npm包

来到我们的账号这里点击Packages

就可以看见我们发布的包,点进去

这里的install就是我们的下载方法

到此我们发布了我们的第一个功能性npm包!

相关推荐
冴羽yayujs6 小时前
GitHub 前端热榜项目 - 日榜(2026-05-07)
前端·github
深蓝海拓6 小时前
用HSL颜色系统改造qdarkstyle样式表库
前端·笔记·python·qt·学习
wuxia21187 小时前
Web全栈开发案例教程(AI辅助版)
前端
MonkeyKing71557 小时前
Flutter Riverpod 2.x 设计思想与最佳实践
前端·flutter
tzy2337 小时前
梳理一下前端模块化规范:CommonJS ESM AMD CMD UMD
前端·webpack·cmd·commonjs·amd·esm·umd
jerrywus7 小时前
别再陪 AI 调 iOS 了:用 cmux + baguette,让 Claude 在你的模拟器里"自己动手"
前端·ios·claude
文心快码BaiduComate8 小时前
Comate Spec模式实践:电商视频自动化生产数据库eDB-MCP服务开发
前端·后端·架构
page_qiu8 小时前
高并发&大数据量&毫秒级响应系统设计方案
java·前端·数据库·高并发·高响应
皮皮大人8 小时前
agent设计系统-大模型意图识别
前端·人工智能
三维搬砖者8 小时前
挑战AI辅助从零构建3D模型编辑器:01基于Vue3 + Three.js的现代化架构设计
前端·vue.js·github