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

一、注册 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