[npm]简简单单发个包

2022-07-26  本文已影响0人  Yinzhishan

发布流程

  1. 创建一个npm账号,这个可以直接登录npm官方网站免费去注册。
    npm官网,https://www.npmjs.com/signup;
    因为官网服务器在国外,说以访问速度会有些慢;
  2. 本地新建一个文件夹,打开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"
  }
}
  1. 然后我们就可以编写我们的代码了
// index.js
function helloNpm() {
  console.log('hello npm')
}
export default helloNpm;
  1. 我们将代码编写完成后,就可以将包发布到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

  1. 通过cmd登录
    在终端中输入密码时,不会显示你输入的内容;但是实际是有的,输入之后直接回车就可以了;
npm login
// 会出现Username:和Password:,输入你在npm官网上的账号密码;
  1. 登录成功之后就可以发布了;
npm publish
// 等进度跑完就好了

  1. 进官网的个人中心和本地install验证是否成功
 npm install @包名

发布注意事项

  1. 需要注意不能跟现有的包名重复(可以去官网是搜索一下);
  2. 有时发布时,会不成功,但是npm官网会给你的邮箱发一条确认邮件,打开点一下链接就可以了;
  3. 每次更新要记得更新版本号;
  4. npm上最好不要上传无意义的包。如果准备的是一个简单的无意义的练习作品,那么可以在上传成功后的72小时内用npm unpublish 包名 -force 命令撤回,撤回的包,在24小时内不能再次上传。

本地调试包

问题:
  1. 封装好的npm包在实际项目中的表现与预期不一致,每次都发包调试很麻烦;
  2. 如果每次都发包调试,会对使用者造成影响,并使我们版本管理变得混乱。
解决方法:

我们可以使用npm link进行本地调试,等调试完成,再进行上传;开发时也可以直接用本地进行,开发完后之后,再进行上传;
步骤:

  1. 打包(如果有)
npm run build
  1. 进入我们打包出来的文件存放目录,比如lib,执行命令:
npm link
  1. 进入我们的实际项目,上一步已经将我们的npm包挂在了全局,这个时候就可以在项目中引入了,然后就可以正常使用了;
npm link npm包的名字
  1. 调试完后取消link
npm unlink 包名
上一篇下一篇

猜你喜欢

热点阅读