npm-publish-flow

发表于 | 分类于

npm 发包流程总结

注册npm账号

package.json中指明必要字段

  • name、version是必须的，缺失将无法发布
  • main指向入口文件，一般为commonjs、esm格式
  • module指向esm格式入口文件
  • unpkg字段
    • 发布到npmjs.com中的包会自动同步到unpkg.com上
    • 通过unpkg字段指明unpkg.com应该如何查找入口文件
    • 一般为umd格式

  • repository

    1
    2
    3
    4
    "repository": {
        "type": "git",
        "url": "git+https://github.com/BryanAdamss/drawing-board.git"
      }

  • 参考https://juejin.im/post/5b231f6ff265da595f0d2540

检查包名是否重名

  • 重名时，将报403错误，提示没有权限提交包(你没有权限修改别人的包)
    • 403 Forbidden - PUT http://registry.npmjs.org/react-native-app-info - You do not have permission to publish "react-native-app-info". Are you logged in as the correct user?
  • npm会使用package.json中的name字段做为包名
  • https://www.npmjs.com/中搜索包名，检查是否重名
  • 有重名，则需要修改包名
    • 修改为scope package即@scope/package-name
      • 这种在npm publish时会被自动认定为私有仓库，私有仓库是需要付费的
      • 需要在npm publish时追加--access public指明包为公开访问
        • npm publish --access=public
        • 注意的是这种形式的包名跟 npm 账户有对应关系，不能随便填写
          • 需要在init时指明scope
            • npm init --scope=@user-name
    • 直接修改为一个不会重名的包名
  • 参考https://github.com/XXHolic/segment/issues/28

检查仓库源

登录

  • 使用npm login或npm adduser命令
  • 然后输入账号、密码登录
  • 登录成功会提示

发包publish

  • 登录后，直接npm publish即可
    • 记得publish前要先构建一波

使用stand-version做发包版本控制

1
2
3
4
5
6
7
8
9
10
11
12
13
// package.json
 "scripts": {    
    "release": "standard-version",
  }


// 初次发布版本
npm run release --first-release
// 添加版本信息和指定发布版本等级
npm run release -m "Commit message" -r minor

// 确认发布，npm publish 发布到 npm
git push --follow-tags origin master && npm publish

常见错误

  • 无法login
    - 源不对
    • 403
      • 包重名
        • 修改包名
      • 没有发包权限
        • 联系管理员开通权限
      • 包版本重复
        • 更新发包版本
      • 源不对
        • 切换源
    • 发布成功后，使用淘宝源无法下载最新包
      • 淘宝源同步问题
        • 等待淘宝源同步后再下载
        • 切换到官方源下载
    • 参考https://www.jianshu.com/p/5ea8e50d628e

总结

  • 注册账号
  • 检查package.json必要字段
  • 检查重名
  • 设置官方源
  • 登录
  • 发布
  • 重设淘宝源

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

{
  "name": "@bryanadamss/drawing-board",
  "version": "1.0.1",
  "description": "canvas绘图板，提供绘制、撤销、旋转、下载等功能",
  "main": "dist/drawing-board.es.js",
  "module": "dist/drawing-board.es.js",
  "unpkg": "dist/drawing-board.umd.js",
  "scripts": {
    "setNpmRegistry": "npm config set registry https://registry.npmjs.org/",
    "setTaoBaoRegistry": "npm config set registry https://registry.npm.taobao.org/",
    "prepublishOnly": "npm run build && npm run setNpmRegistry",// 发布前构建、设置npm源
    "postpublish": "npm run setTaoBaoRegistry",// 发布后，重设为淘宝源
    "build": "rollup --config rollup.config.js",
    "release": "standard-version",
    "release:first": "npm run release --first-release",
    "publishToNpm": "git push --follow-tags origin master && npm publish --access=public"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/BryanAdamss/drawing-board.git"
  },
  "keywords": [
    "canvas",
    "drawing",
    "paint"
  ],
  "author": "GuangHui",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "core-js": "^3.2.1",
    "rollup": "^1.20.3",
    "rollup-plugin-babel": "^4.3.3",
    "rollup-plugin-babel-minify": "^9.0.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "standard-version": "^7.0.0"
  },
  "bugs": {
    "url": "https://github.com/BryanAdamss/drawing-board/issues"
  },
  "homepage": "https://github.com/BryanAdamss/drawing-board#readme",
  "dependencies": {}
}

项目链接