【xingorg1-ui】基于vue3.0从0-1搭建组件库 (十) 组件发布到NPM
(十) 组件包发布到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官网搜索一下，没有重名的包才能发布成功，否则后期不能发布。
当前文件下打开CMD
待发布的文件包根目录下，打开命令行工具。
删除淘宝镜像
去掉npm的淘宝镜像，因为发包是要发到npm上，而不是发到npm的淘宝镜像上：
npm config delete registry
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 patch package.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 minor package.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 minor package.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 |
升级版本与git仓库
效果如图：
**
执行版本提升命令前，会检查git仓库树是否全部提交，如果没有将不成功：
只有清空暂存区后，该系列命令才会生效。 版本提升后，package会自动修改，且自动commit，好神奇！ 然后我就直接push代码就行了。
代码提交干净了，发版时刻终于来啦！🎉一切顺利～
发布命令
版本修改成功后，执行命令进行发布
npm publish
偶no！果然报错了！说我package.json里的private属性不符合开源协议吧，需要将之删除。
修改了package.json，还需要提交git仓库，清空暂存树。
发布成功🎉
现在再去NPM搜索包名就已经有啦！哈哈哈哈哈哈哈哈！！！
来个全家福👪
来个正脸照🤳：
越努力，越幸运；阿门。
