【xingorg1-ui】基于vue3.0从0-1搭建组件库 (十) 组件发布到NPM

xing.org1^

发布于 2020-11-24 12:07:50

9220

发布于 2020-11-24 12:07:50

(十) 组件包发布到NPM

配置package.json

本来需要配置.npmignore配置文件，但是网上不建议用这种方式，说是黑名单的方式，不在黑名单里的关键信息都发上去了。而是建议使用package.json里配置白名单的方式。于是将package.json配置如下：关键配置处加上了备注信息：

{
  "name": "xingorg1-ui", # 组件库名称
  "version": "1.0.0", # 版本号（下边讲述自动进行版本提升）
  "description": "A Component Library for Vue3.js.",
  # "private": true, # 这个要删掉，不然发布不了
  "main": "./dist/xingorg1.umd.min.js", # 引入组件后的入口文件
  "files": [ # npm发包白名单，标注哪些会被发布
    "dist",
    "packages",
    "README",
   "CHANGELOG",
   "LICENSE"
  ],
  "scripts": {
    "dev": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name xingorg1 ./packages/index.js && vue-cli-service build --xingorg1 --no-clean",
    "test:unit": "vue-cli-service test:unit",
    "test:ui": "karma start",
    "lint": "vue-cli-service lint",
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs"
  },
  "repository": { # 仓库地址
    "type": "git",
    "url": "git+https://github.com/xingorg1/xingorg1-ui.git"
  },
  "homepage": "", # 页面主页（待创建docs后发布到gh-pages
  "keywords": [
    "xingorg1",
    "vue3",
    "components"
  ],
  "author": "guojufeng", # 作者
  "license": "MIT", # 开源协议
  "bugs": { # bugs地址
    "url": "https://github.com/xingorg1/xingorg1-ui/issues"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.8",
    "@vue/cli-plugin-eslint": "^4.5.8",
    "@vue/cli-plugin-unit-mocha": "^4.5.8",
    "@vue/cli-service": "^4.5.8",
    "@vue/compiler-sfc": "^3.0.2",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^2.0.0-beta.7",
    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.1",
    "chai": "^4.2.0",
    "eslint": "^6.8.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.1.0",
    "html-webpack-plugin": "^4.5.0",
    "karma": "^5.2.3",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-mocha": "^2.0.1",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-spec-reporter": "0.0.32",
    "karma-webpack": "^4.0.2",
    "lint-staged": "^9.5.0",
    "mocha": "^8.2.0",
    "prettier": "^1.19.1",
    "sass": "^1.28.0",
    "sass-loader": "^8.0.2",
    "vitepress": "^0.7.1"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "engines": { # 环境与版本要求
    "node": ">=8.9.1",
    "npm": ">=5.5.1"
  },
  "browserslist": [ # 浏览器支持
    "last 3 Chrome versions",
    "last 3 Firefox versions",
    "Safari >= 10",
    "Explorer >= 11",
    "Edge >= 12",
    "iOS >= 10",
    "Android >= 6"
  ]
}

包名检查

为了防止你package.json里配置的name属性值（也就是包名）已经存在于市面上，所以需要先去NPM官网搜索一下，没有重名的包才能发布成功，否则后期不能发布。

image.png

当前文件下打开CMD

待发布的文件包根目录下，打开命令行工具。

删除淘宝镜像

去掉npm的淘宝镜像，因为发包是要发到npm上，而不是发到npm的淘宝镜像上：

npm config delete registry

image.png

NPM注册or登陆账号

adduser

或者用该命令方式注册：

npm addUser

我的账号：xing.org1 我的密码：******** 我的?：outlook邮箱（据说搜狐邮箱不行，可能没充钱？）

login登陆

login是addUser的一个别名，也可以使用下边的命令

npm login

同上：

版本信息查看

npm version

版本管理——版本提升

npm version “xxx” # xxx特别说明如下

xxx 为具体可用命令

major: 主版本号
premajor: 预备主版本
minor: 次版本号
preminor: 预备次版本
patch: 修订号
prepatch: 预备修订版
prerelease: 预发布版本

比如想升级一个此版本号，执行命令

npm version minor

各命令操作明细表

名称	命令	含义	追加说明	特别注意
help	npm version --help	version命令概览
version	npm version	查看当前包的详细版本信息
prerelease	npm version prerelease	package.json 中的版本号1.0.0变为 1.0.1-0	再次使用npm version prerelease prerelease增版本号+1，变成1.0.1-1	当执行npm version prerelease时，如果没有预发布号，则增加minor，同时prerelease 设为0；如果有prerelease,则prerelease 增加1。所以第一次搞预发布版本，得先有预发布号
prepatch	npm version prepatch	package.json 中的版本号1.0.1-1变为 1.0.2-0	prepatch - 直接升级小号，增加预发布号为0。	如果没有prerelease，则自动增加prerelease版本号为0如npm version prepatch 版本号3.0.0 变为 3.0.1-0
preminor	npm version preminor	package.json中的版本号1.0.2-0变为 1.1.0-0	preminor - 直接升级中号，小号置为0，增加预发布号为0	如果没有prerelease，则自动增加prerelease版本号为0如npm version premajor 版本号1.1.0 变为 2.0.0-0
premajor	npm version premajor	package.json 中的版本号1.1.0-0变为 2.0.0-0	premajor - 直接升级大号，中号、小号置为0，增加预发布号为0。	如果没有prerelease，则自动增加prerelease版本号为0如npm version premajor 版本号2.1.0 变为 3.0.0-0
patch	npm version patch	package.json 中的版本号2.0.0-0变为 2.0.0	再次执行npm version patchpackage.json 中的版本号2.0.0变为 2.0.1	patch：- 如果有prerelease ，则去掉prerelease ，其他保持不变- 如果没有prerelease ，则升级patch
minor	npm version minor	package.json 中的版本号3.0.1-0变为 3.1.0	再次执行npm version minorpackage.json 中的版本号3.1.0变为 3.2.0	minor：- 如果有prerelease ，则去掉prerelease ，其他保持不变- 如果没有prerelease，直接升级minor，同时patch设置为0
major	npm version major	package.json 中的版本号3.1.0-1变为 4.0.0	再次执行npm version minorpackage.json 中的版本号4.0.0变为 5.0.0	major- 如果没有prelease，则直接升级major，其他位都置为0；- 如果有预发布号： minor和patch都为0，则将prerelease 去掉，升级major。这里升不升级主版本号？待测试- 如果有预发布号：且minor和patch有任意一个不是0，则升级一位major，其他位都置为0，并去掉prerelease。如：5.1.0-0 -->6.0.0