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

相关推荐
柯南二号14 分钟前
CSS 学习提升网站或者项目
前端·css
tryCbest18 分钟前
Vue2-实现elementUI的select全选功能
前端·javascript·elementui
redarmychen1 小时前
基于 Node.js 和 Spring Boot 的 RSA 加密登录实践
node.js
糖墨夕2 小时前
Vue中实现组织架构图功能的方案调研
前端
阿諪諪2 小时前
Vue知识点(5)-- 动画
前端·vue.js·nginx
工会代表2 小时前
macOS 内外网共存方案:配置双网卡实现网络分流
前端·网络协议·macos
蘑菇头爱平底锅2 小时前
数字孪生-DTS-孪创城市-项目初始化
前端·数据可视化
陈随易2 小时前
Bun v1.2.9发布了,内置了Redis操作
前端·后端·程序员
DarkLONGLOVE2 小时前
解锁 JavaScript 技能:全面掌握自定义属性的奥秘
前端·javascript