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

2021年09月15日 阅读数:2
这篇文章主要向大家介绍【xingorg1-ui】基于vue3.0从0-1搭建组件库 (十) 组件发布到NPM,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

(十) 组件包发布到NPMnode

配置package.json

原本须要配置.npmignore配置文件,可是网上不建议用这种方式,说是黑名单的方式,不在黑名单里的关键信息都发上去了。
而是建议使用package.json里配置白名单的方式。因而将package.json配置以下: 关键配置处加上了备注信息:webpack

{
  "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官网搜索一下,没有重名的包才能发布成功,不然后期不能发布。git

image.png
image.png

当前文件下打开CMD

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

删除淘宝镜像

去掉npm的淘宝镜像,由于发包是要发到npm上,而不是发到npm的淘宝镜像上:web

npm config delete registry
image.png
image.png

NPM注册or登录帐号

adduser

或者用该命令方式注册:chrome

npm addUser

个人帐号:xing.org1
个人密码:********
个人📮:outlook邮箱 (听说搜狐邮箱不行,可能没充钱?) image.pngvue-cli

login登录

login是addUser的一个别名,也能够使用下边的命令npm

npm login

同上:

image.png

版本信息查看

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仓库

效果如图: image.png ** 执行版本提高命令前,会检查git仓库树是否所有提交,若是没有将不成功: image.png

只有清空暂存区后,该系列命令才会生效。 版本提高后,package会自动修改,且自动commit,好神奇! 而后我就直接push代码就好了。

代码提交干净了,发版时刻终于来啦!🎉一切顺利~

发布命令

版本修改为功后,执行命令进行发布

npm publish

偶no!果真报错了!说我package.json里的private属性不符合开源协议吧,须要将之删除。 image.png 修改了package.json,还须要提交git仓库,清空暂存树。

发布成功🎉

image.png
image.png

如今再去NPM搜索包名就已经有啦!哈哈哈哈哈哈哈哈!!!

来个全家福👪

image.png
image.png

来个正脸照🤳:

image.png
image.png