@qn-pandora/pandora-visualization

Pandora 通用可视化库

开发模式

Pandora-Visualization 为可视化依赖库，以 Phoenix 引用 Pandora-Visualization 为例，介绍如何开发模式。

1. 安装依赖

yarn install

2. 修改 react render 方法的定义

React 15 与 16 版本中 Component 组件的接口不一致，为了让不同 React 版本的项目在引用 Pandora-Visualization 项目时不报错，需要修改@types/react --> index.d.ts 中 render 方法的签名，将返回值改成any render(): any

3. 修改包的入口

为了便于调试，在 Phoenix 中引用 Pandora-Visualization 时，期望使用的是 Pandora-Visualization 的源文件，而非编译以后的文件。因此修改 Pandora-Visualization 的 package.json:

4. Pandora-Visualization 链接到全局

npm link

5. Phoenix 链接到 Pandora-Visualization

npm link pandora-visualization

6. Phoenix 项目的 ts-loader 能够处理链接过来的 Pandora-Visualization

假设 Pandora-Visualization 的项目路径为: /Users/sunzhiyuan/Documents/Qiniu/Source/pandora-visualization，修改 Phoenix 的 webpack ts-loader 配置。

打包

为减小最终应用的 bundle 体积，应尽量避免公共库被同时打包到 pandora-visualization 和引用 pandora-visualization 的应用中，例如react, antd, mobx, mobx-react等库，应该只被打包到引用 pandora-visualization 的应用中，pandora-visualization 中应该不包含。约定 package.json 中peerDependencies中的库不会被打包到最终生成的 bundle 中。

打包命令

全量编译 npm run build

快速编译 npm run build:fast

项目初始 clone 之后，至少经过一次全量编译，为了提高编译速度，以后可以采用快速编译。