如何开发自己的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包!

相关推荐
风止何安啊6 分钟前
我一个前端仔,居然用 Python 搞起了 AI?从零到一,撸了个 AI 聊天框小 demo
前端·人工智能·后端
GISer_Jing8 分钟前
Claude Code插件系统全解析
前端·人工智能·ai·架构
小茴香35322 分钟前
Vue3路由权限动态管理
前端·前端框架·vue3
RANxy26 分钟前
零基础全栈 React 入门(四):React Router 路由配置
前端·react.js
KaMeidebaby27 分钟前
卡梅德生物技术快报|peg 修饰调控 MXene/WS2 异质结,氨气传感器制备与机理研究
大数据·前端·人工智能·架构·spark·新浪微博
lichenyang45333 分钟前
鸿蒙实战:安全高度 · 输入框贴键盘弹起 · Tab 底部导航全解
前端
前端毕业班37 分钟前
uni-app 小程序样式隔离实践指南和原理分析
前端·javascript·vue.js
JarvanMo43 分钟前
Flutter 鸿蒙化迎来"大搬家"
前端
龙佚44 分钟前
抖动缓冲与播放控制:平滑播放的艺术
前端·架构
仿生狮子1 小时前
🎼 从文本到交互界面——GenUI 的中庸之道
前端·vue.js·markdown