关键词搜索

全站搜索
×
密码登录在这里
×
注册会员
×

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

怎么发布自定义插件包到npm平台

发布2022-05-12 浏览486次

详情内容

做前端开发时,经常用到npm下载引入第三方包,再如何制作并发布自己的包到npm平台呢。

首先要的按规则创建自己的包目录和文件。

一、创建包文件及目录,以小编亲做的插件包为例在无空格的目录下新建一个ip-geo-cn目录.

注意目录不能带空格或中文

命令:

然后执行npm init,初始化项目的一些基本信息。然后你会发现项目中多了一个package.json的文件。

image.png

 编写插件内容

image.png


三、发布插件包到npm

你需要一个NPM账号。如果没有的话,点此创建。

2. 通过命令行登录你的npm账号。(执行命令行前,你需要Node运行环境和NPM CLI,点此安装)

使用 npm login登录

npm login

根据命令行提示,输入用户名、密码、邮件地址:

Username: xxxx
Password: 
Email: (this IS public) xxxx@gmail.com
Logged in as boguan on https://registry.npmjs.org/.

注意如果遇到登陆失败,可能是你的node环境切换到淘宝之类的镜像源了,请切回npm到https://registry.npmjs.org,否则发布失败

切换命令

npm config set registry https://registry.npmjs.org

发布命令:

npm publish

成功后在你的npm管理中心会看到,

image.png

image.png


还有有一个更简单的方式帮我们完成以上步骤,利用工具 np。

安装

可以运行下面的命令:

npm install np

这种方式可以很好地工作。但我更喜欢全局安装 np,使我可以在任何地方运行 np。

npm install --global np

在使用 np 前,你需要确定:

  • 你的项目是一个 Git 仓库(repository)

  • 需要添加远端仓库(remote)的地址

  • 你必须至少已经push到 remote 至少一次

  • 你也需要确定你的工作目录是干净的

# Initialize Git
git init

# Adds a remote repository
git remote add origin some-url

# Commit changes
git add .
git commit -m "Initial Commit"

如果你的项目不是一个 Git 仓库(repository),你将会得到一个 error:

image.png

如果你的项目没有添加远端仓库(remote),你也会得到一个 error(在 Prerequisite check过程)

image.png

如果你的工作目录是不干净的,你也会得到一个 error:

image.png

如果你先前没有push到远端仓库至少一次,np 只是停在那里,什么都不做。

使用 np

运行下面的命令:

np

根据提示选择版本号:

image.png

选择一个数字,np 会要求你确认选择。

image.png

之后,np 会帮你完成其余的发布工作。

运行test报错

运行 npm test命令作为 np checks的一部分。

如果你安装教程到现在,你有可能得到一个 error,像下面这样:

image.png

发生这个错误,是因为执行 npm test命令后的返回结果。你也可以手动执行:

npm test

image.png

我们需要打开 package.json 文件,修改 test脚本来修复这个 error。

当前它看起来像是这样:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"},

修改成:

"scripts": {
  "test": "echo \"No test specified\""},

这样就可以了,是因为 exit 1 触发了 error。

现在,np 应该就可以完成整个发布过程了。(记得在运行np前执行 git commit提交这些改变) 。

image.png

在流程的最后。np 会启动浏览器窗口,在这写你的 release notes。总之,np 使得 npm发包过程变得非常简单!

点击QQ咨询
开通会员
返回顶部
×
  • 微信支付
微信扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
确定支付下载