背景

利用create-react-app搭建图谱demo，图渲染组件已封装好graph.canvas，已发布npm包hz-ga-graph-canvas

安装依赖

  npm install

项目启动

  npm start

提交

由于使用standard-version包用于自动更新版本和生成CHANGELOG，须按照提交规范提交代码

• 提交规范:

  <type>[optional scope]: <description>

  [optional body]

  [optional footer(s)]

• type类型说明:

  fix: 修复bug
  feat: 增加新功能
  style: 仅改动代码格式,注意不是 css 修该（例如空格、格式缩进修改)
  perf: 优化相关，比如提升性能、体验 
  refactor: 代码重构(没有新增功能或者修复bug)
  docs: 仅改动文档相关的内容，比如 README, CHANGELOG等等
  test: 测试用例新增、修改
  chore: 构建流程或辅助工具的变动

• 1.fix类型对应于 CHANGELOG 文件中的 Features
• 2.feat类型对应于 CHANGELOG 文件中的 Bug Fixes
• 3.BREAKING CHANGE(在脚注中包含 BREAKING CHANGE)对应于CHANGELOG 文件中的 BREAKING CHANGES
• 其余类型的提交将不会记录在 CHANGELOG文件中

项目说明

|.
├── src
    ├── App.css 
    ├── App.js  // demo主入口
    ├── data    // mock数据方法
    ├── graph.canvas  // 图渲染组件(调试及发布用)

项目mock数据使用

调整app.js的graphData.generateGraph方法的参数

图渲染组件使用

图渲染组件相关说明请参考 graph.md 文件

图渲染组件发布

• 首先保证自己有注册好npm账号并输入命令登录

npm login

• 查看当前的登录用户是谁

npm whoami

• 执行编辑及版本更新及发布命令，已整合为pub

npm run pub

发布注意事项

• 发包需要权限，需要时请找敖景宽开通权限
• 发布包的时候需要将源修改回官方的https://registry.npmjs.org/ 源，推荐使用nrm管理npm源
• 如果项目使用的是淘宝源，发包后可能需要等待几分钟才能更新到新版本

本地调试 npm 包

0. 启动项目：npm start
1. 安装

    npm i yalc -g

2. 发布推送(在npm包项目中) 每次修改后，执行npm run push更新npm包

    npm run push

如果报babel的错，先把本地的nodemodules删掉，重新npm install 3. 添加依赖(在本地项目中执行，同时去vue.config.js里把configureWebpack里面的snapshot:{managePath:[]}注释去掉) 在本地项目中添加npm包,执行yalc add hz-ga-graph-canvas,只需要执行一次

    npm run add hz-ga-graph-canvas

4. 移除依赖(在本地项目中执行) 移除本地项目中的hz-ga-graph-canvas包,执行yalc remove hz-ga-graph-canvas,只需要执行一次

    npm run remove hz-ga-graph-canvas