如何发布一个属于自己的 npm 包

如何发布一个属于自己的 npm 包

start

  • 在日常的工作中,我们会接触很多 npm 包。

  • 例如:

    npm install jquery
    
    npm install @vue/cli
    
    npm install axios
    
    # ... 等等
    
  • 有时候会想到,构建一个属于自己的 npm 包,应该超级酷吧?

1. 初始化一个项目

1.1 创建一个文件夹,打开对应终端(命令行窗口)

在这里插入图片描述

1.2 初始化 package.json

[在这里插入图片描述

1.3 创建一个基础的index.js文件

console.log('hello-tomato7')

function sayHello() {
  console.log('hello-tomato7')
}

exports.sayHello = sayHello
// 使用的是 commonjs 规范。

在这里插入图片描述

2. 注册账号

访问npm的官网: 访问npm官网点击这里。注册一个 npm 账号,并登录。

在这里插入图片描述
在这里插入图片描述

如果英文比较好,npm的官网建议多逛逛,可以发现很多优质的npm依赖包。

3. 命令行中登录我们的npm账号

!! 需要注意一下,切换我们的下载源为npm官方下载源。

3.1 下载源

  • 借助工具 : nrm 切换下载源。
  • 可以手动切换;
3.1.1 nrm 切换下载
# 1. 下载依赖
npm i -g nrm

# 2. 查看下载源列表
nrm ls

# 3. 使用npm官方的下载源。
nrm use npm 

# 4. 验证是否切换成功,查看输出的网址是否为我们设置的网址。
npm get registry

在这里插入图片描述

3.1.2 手动切换
# 1. 使用npm官方的下载源。
npm set registry https://registry.npmjs.org/ 

# 2. 验证是否切换成功,查看输出的网址是否为我们设置的网址。
npm get registry

在这里插入图片描述

3.2 登录

npm login

在这里插入图片描述

4. 推送我们的包

npm publish

# publish 出版

在这里插入图片描述

在这里插入图片描述

5. 验证是否发布成功

在这里插入图片描述

可以看到上方的截图,本地初始化一个项目,下载属于我自己的 npm 包 tomato7,在代码中引用并执行。

正确输出 hello-tomato7

6. 如何限制上传的文件

可以看到例如: vue 项目,主要暴露了 dist 文件,是怎么做到的?

在这里插入图片描述

可以借助package.json中的 files 字段

  "files": [
    "src",
    "dist"
  ],

7.关联 github仓库

可以借助package.json中的 repository 字段

 "repository": {
    "type": "git",
    "url": "https://github.com/lazy-tomato/tomato7"
  },

end

  • npm包的创建就到这里,后续有好的想法,再做补充。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lazy_tomato

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值