[npm]简简单单发个包
2022-07-26 本文已影响0人
Yinzhishan
发布流程
- 创建一个npm账号,这个可以直接登录npm官方网站免费去注册。
npm官网,https://www.npmjs.com/signup;
因为官网服务器在国外,说以访问速度会有些慢; - 本地新建一个文件夹,打开cmd,输入
npm init
;这时你会得到一个package.json
文件;
在这个文件中,你可以填写:包名、版本号、作者、执行文件的路径、keywords等信息
{
"name": "qw-mobile-cli",
"version": "0.1.0",
"description": 脚手架工具",
"main": "index.js",
"bin": {
"qw-vue3-mobile": "./index.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"vue3",
"移动端",
"脚手架"
],
"author": "",
"license": "ISC",
"dependencies": {
"commander": "^6.1.0",
"git-clone": "^0.1.0",
"open": "^7.2.1",
"shelljs": "^0.8.4"
}
}
- 然后我们就可以编写我们的代码了
// index.js
function helloNpm() {
console.log('hello npm')
}
export default helloNpm;
- 我们将代码编写完成后,就可以将包发布到npm上,首先我们要查看我们的npm链接的是不是官网,如果不是官网就要切换到官网;
因为我们国内访问npm会很慢,所以大家有时会切换到taobao镜像,或者公司有自己的npm镜像,我们会链接到公司的镜像;
需要注意的是:一定要确认好自己要发布的包地址,不要把公司的私有包发布到公共网络。
// 查看所有源
npm config list
// metrics-registry = "https://packages.aliyun.com/627cbb99487c500c27f5847b/npm/npm-registry/"
// 切换到官方源
npm config set registry https://registry.npmjs.org
// 查看源是否切换成功
npm config list
- 通过cmd登录
在终端中输入密码时,不会显示你输入的内容;但是实际是有的,输入之后直接回车就可以了;
npm login
// 会出现Username:和Password:,输入你在npm官网上的账号密码;
- 登录成功之后就可以发布了;
npm publish
// 等进度跑完就好了
- 进官网的个人中心和本地install验证是否成功
npm install @包名
发布注意事项
- 需要注意不能跟现有的包名重复(可以去官网是搜索一下);
- 有时发布时,会不成功,但是npm官网会给你的邮箱发一条确认邮件,打开点一下链接就可以了;
- 每次更新要记得更新版本号;
- npm上最好不要上传无意义的包。如果准备的是一个简单的无意义的练习作品,那么可以在上传成功后的72小时内用
npm unpublish 包名 -force
命令撤回,撤回的包,在24小时内不能再次上传。
本地调试包
问题:
- 封装好的npm包在实际项目中的表现与预期不一致,每次都发包调试很麻烦;
- 如果每次都发包调试,会对使用者造成影响,并使我们版本管理变得混乱。
解决方法:
我们可以使用npm link
进行本地调试,等调试完成,再进行上传;开发时也可以直接用本地进行,开发完后之后,再进行上传;
步骤:
- 打包(如果有)
npm run build
- 进入我们打包出来的文件存放目录,比如lib,执行命令:
npm link
- 进入我们的实际项目,上一步已经将我们的npm包挂在了全局,这个时候就可以在项目中引入了,然后就可以正常使用了;
npm link npm包的名字
- 调试完后取消link
npm unlink 包名