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

相关推荐
刘宇琪1 分钟前
如何在大型前端项目中有效管理 TypeScript 的类型复用与共享?
前端
阿奇__2 分钟前
前端模块化指南:CJS 与 ESM 的区别与混用
前端
北寻北爱5 分钟前
面试篇-webpack+vite
前端
Kinghiee5 分钟前
使用webpack构建vue3 ssr
前端·webpack·node.js·vue3ssr
wuhen_n9 分钟前
回溯算法入门 - LeetCode经典回溯算法题
前端·javascript·算法
xcs1940515 分钟前
前端 vue this.$nextTick(() => {
前端·javascript·vue.js
广州华水科技17 分钟前
如何在基础设施安全中有效实现GNSS位移监测的应用?
前端
大漠_w3cpluscom21 分钟前
前端怎么提升自己的CSS编写能力?
前端
我是若尘23 分钟前
大数据量渲染优化:分批渲染技术详解
前端
ruanCat23 分钟前
pnpm 踩坑实录:用 public-hoist-pattern 拯救被严格隔离坑掉的依赖
前端·npm·node.js