发布属于自己的NPM组件UI包

在我们开发的过程中, 经常会用到一些比较常用的UI组件或工具类. 这一节, 我们来聊一聊如何通过npm来发布组件包. 让自己在开发的多个项目中, 使用通用的组件, 同时也能让别人也享受到您的成果.

新建项目

vue create workflow-bpmn-xy

将 src 目录修改为 examples 并删除所有文件, 仅保留 App.vue 和 main.js
新增 package 目录

编写组件

把编写好的组件放到在 package 中

在 index.js 文件中添加如下代码(可根据自己编写的组件自行更改)

import workflowBpmnModeler from './index.vue'

workflowBpmnModeler.install = (Vue) => {
  Vue.component(workflowBpmnModeler.name, workflowBpmnModeler)
}
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default workflowBpmnModeler

或者, 当你有多个组件需要使用时

import workflowBpmnModeler from './index.vue'

// 把组件保存到一个数组中
const components = [
    workflowBpmnModeler
]

// 定义 install 方法
const install = function (Vue) {
    if (install.installed) return
    install.installed = true
    // 遍历组件列表并注册全局组件
    components.map(component => {
    	//component.name 此处使用到组件vue文件中的 name 属性
        Vue.component(component.name, component) 
    })
}
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    // 导出的对象必须具备一个 install 方法
    install,
    // 组件列表
    ...components
}

在 examples/App.vue 文件中调用

<template>
  <div id="app">
    <bpmn
          :options="options"
          @save="save"
          @showXML="showXML"
    >
    </bpmn>
  </div>
</template>

<script>
import Bpmn from '../package/index'

export default {
  name: 'App',
  components: {
    bpmn: Bpmn
  },
  data() {
    return {
      options: {}
    }
  },
  methods: {
    showXML(val) {
      console.log('showXML',val)
    },
    save(val) {
      console.log('save', val)
    }
  }
}
</script>

<style>
#app {
  height: 100%;
  width: 100%;
}
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
</style>

运行 npm run serve 测试组件是否正常使用

上传代码

1. 编辑 package.json 文件

{
  // 项目名称 (必填)
  "name": "workflow-bpmn-xy",
  "description": "基于 `vue` 和 `bpmn.io@7.0` ，实现 flowable 的 modeler 模型设计器",
  // 版本号 (必填)
  "version": "0.1.0",
  "author": "xyang",
  "license": "MIT",
  // 发布时必须设置为 false
  "private": false,
  // 指定打包主文件
  "main": "dist/workflow-bpmn-xy.umd.min.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib package/index.js",
    // 指定入口文件路径
    "build": "cross-env NODE_ENV=build vue-cli-service build --target lib --inline-vue --entry package/index.js",
    "prepublish": "yarn build"
  },
  "keywords": [
    "vue",
    "element-ui",
    "flowable",
    "模型设计器"
  ],
  "files": [
    "dist",
    "package",
    "LICENSE",
    "README.md"
  ],
  "dependencies": {
    "@riophae/vue-treeselect": "^0.4.0",
    "bpmn-js": "^15.2.2",
    "bpmn-js-bpmnlint": "^0.21.0",
    "bpmnlint": "^9.2.0",
    "bpmnlint-loader": "^0.1.6",
    "diagram-js": "^12.8.1",
    "element-ui": "^2.15.14",
    "vkbeautify": "^0.99.3",
    "xcrud": "^0.4.19",
    "vue": "^2.6.14",
    "core-js": "^3.8.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-eslint": "^10.1.0",
    "cross-env": "^7.0.2",
    "eslint": "^7.5.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.2",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

2. 创建发布忽略文件.npmignore

.DS_Store
node_modules
examples
public/
vue.config.js
babel.config.js
*.map
*.html
package-lock.json
yarn.lock

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
*.map

3. npm publish发布组件包
发布前, 先前往 NPM官网 查询是否已有同名的组件. 已有同名组件无法发布!!!

查看本地npm厂库地址是否为 https://registry.npmjs.org/

npm config ls

若不是 这需要切换到npm的官方地址

npm set registry=https://registry.npmjs.org

执行登录命令, 输入账号,密码,邮箱 (若没有账号, 请前往 NPM官网 自行注册)
当出现Logged in as dengzemiao on https://registry.npmjs.org/字样表示登录成功

npm login

在输入完账号密码和邮箱后, 可能还需要验证一次性密码. 会发送到注册时的邮箱.

npm notice Please check your email for a one-time password (OTP)
Enter one-time password from your authenticator app: xxxxxxxx

返回项目, 执行命令 npm publish 发布组件库 (执行命令时会自动执行 prepublish 脚本)
当更新组件库后需要重新发布, 重新发布时, 需要修改 package.json 文件中的版本号. 否则无法发布成功

使用组件

发布成功后, 在 NPM官网 可查看到自己发布的项目. 使用一下命令导入组件库到自己的项目中使用

npm install workflow-bpmn-xy

<template>
  <div class="app-container">
    <bpmn-modeler
      ref="refNode"
      :xml="xml"
      :categorys="categorys"
      :options="options"
      :is-view="false"
      @save="handleSave"
      @showXml="showXml"
    >
    </bpmn-modeler>
  </div>
</template>

<script>
import BpmnModeler from 'workflow-bpmn-xy';
import {listUser} from "@/api/system/user";
import {listRole} from "@/api/system/role";

export default {
  name: "BpmnView",
  components: {BpmnModeler},
  data() {
    return {
      xml: '',
      categorys: [],
      options: {
        apis: {
          listUser,
          listRole
        }
      }

    }
  },
  methods: {
    handleSave(data) {
      console.log(data)
    },
    showXml(xml) {
      console.log('showXml', xml)
    }
  }
}
</script>

<style scoped lang="scss">

</style>