npm 上传发布自定义组件以及使用详细流程

发布于 2024-03-07  110 次阅读


一、注册 NPM 账号

  • 注册好之后记得去填的注册邮箱里面验证一下,在继续下一步,否则发布会报错。

二、打开命令行,登录 NPM

  • 在登录之前,先确定一下 NPM 镜像,如果镜像在之前设置为了淘宝镜像,那么在使用 npm login 登录时会出错,所以需要先将源替换为官方源,然后再上传。

// 查看当前 npm 源配置
$ npm config ls
// 查看当前 npm 全部源配置
$ npm config ls -l
// 修改 npm 源地址为官方源
$ npm config set registry https://registry.npmjs.org/
// 将 npm 源地址修改为淘宝源(用于安装 npm 速度慢的时候使用)
$ npm config set registry https://registry.npm.taobao.org/

  • 通过执行 $ npm config ls -l 命令查看 metrics-registry = "https://registry.npmjs.org/" 是否为官方源,如果不是则使用上面命令设置为官方源。
  • 进行登录

// 登录命令
$ npm login

// 退出登录命令
$ npm logout

  • 运行登录命令之后输入NPM 账号、密码、邮件

$ npm login
Username: xxxx
Password:
Email: (this IS public) xxxxx@163.com
Logged in as dengzemiao on https://registry.npmjs.org

  • 登录之后出现最下面这行 Logged in as dengzemiao on https://registry.npmjs.org/. 就说明登录成功了。

三、上传发包

  • 进入文件夹修改package.json

{
// 发布的包名,默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线!
"name": "#####",
// 版本号,每次要更新
"version": "1.0.0",
// 包的描述
"description": "仅供测试,别下载",
// 文件入口,默认是 index.js,可修改
"main": "index.js",
"scripts": {
// 测试命令,可以不填直接回车
"test": "echo \"Error: no test specified\" && exit 1"
},
// 作者名称
"author": "###",
// 包遵循的开源协议,默认是ISC
"license": "ISC",
// 因为组件包是公用的,所以 private 为 false
"private": false,
// 当前包需要依赖的第三方组件,如何安装使用依赖包,可以看看文章顶部的NPM命令介绍文章
"dependencies": {},
// "devDependencies": {}
// 指定代码所在的仓库地址
"repository": {
"type": "git",
"url": "https://github.com/dengzemiao/DZMFullPage.git"
},
// bug在哪里提
"bugs": {
"url": "https://github.com/dengzemiao/DZMFullPage/issues"
},
// 项目官网的地址
"homepage": "https://github.com/dengzemiao/DZMFullPage",
// 指定打包后,包中存在的文件夹
"files": [
"dist",
"src"
],
// 指定了项目的目标浏览器的范围
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
// 项目关键词,供搜索
"keywords": [
"测试"
]
}

  • 调整 package.json,文件中这两个是必须要填写的,第一个是包名,第二个是版本号,其他随意,更具自己需求调整,没什么特别需求就修改名字跟版本号直接上,其他默认是啥就是啥,看自己需求去改或者增删。
  • 去 NPM 官网查询一下当前包名是否存在,存在的话就需要换一个

四、发布代码

# 普通包
$ npm publish

# 私域包
# 包名:@username/packageName
# username 必须为当前登录的用户名,必须一致,否则会报错,然后加上参数 --access public
$ npm publish --access public

  • 这样就发布成功了!!!

五、使用刚发布的包

$ npm i xxxx

参考文章https://blog.csdn.net/zz00008888/article/details/109024826

最后更新于 2024-03-07