@qn-pandora/pandora-visualization/README.md

Pandora 通用可视化库

Pandora 通用可视化库

## 开发模式

@qn-pandora/pandora-visualization 为可视化依赖库，以 Phoenix 引用 @qn-pandora/pandora-visualization 为例，介绍如何开发模式。

#### 1. 安装依赖

```bash
# npm is not allowed
$ yarn install
```

> **注意：必须使用`yarn install`安装依赖，不可使用`npm install`**。
>
> 当前 monrepo 采用 [yarn workspace](https://classic.yarnpkg.com/en/docs/workspaces/)统一管理所有 package 的依赖，yarn.lock 文件位于顶层目录。

> **注意：**
>
> 1. 项目初始 clone 之后，至少经过一次全量编译（`yarn build`）。
> 2. build `@qn-pandora/app-sdk`：由于`@qn-pandora/pandora-visualization`依赖于`@qn-pandora/app-sdk`，`yarn install`之后会创建软链指向`@qn-pandora/app-sdk`。该包的入口文件为`lib/index.js`，而源代码中不包含`lib`目录，因此需要到`@qn-pandora/app-sdk`目录下执行`yarn build`。

#### 2. 修改包的入口

为了便于调试，在 Phoenix 中引用 @qn-pandora/pandora-visualization 时，期望使用的是 @qn-pandora/pandora-visualization 的源文件，而非编译以后的文件。因此修改 **@qn-pandora/pandora-visualization** 的 package.json:
![](./docs/imgs/package-entry.png)

#### 3. @qn-pandora/pandora-visualization 链接到全局

```bash
$ npm link
```

#### 4. Phoenix 链接到 @qn-pandora/pandora-visualization

```bash
$ npm link @qn-pandora/pandora-visualization
```

## 打包

为减小最终应用的 bundle 体积，应尽量避免公共库被同时打包到 @qn-pandora/pandora-visualization 和引用 @qn-pandora/pandora-visualization 的应用中。

例如`react, antd, mobx, mobx-react`等库，应该只被打包到引用 `@qn-pandora/pandora-visualization` 的应用中，`@qn-pandora/pandora-visualization` 中应该不包含。

<font style="color: red;">约定 package.json 中`peerDependencies`中的库不会被打包到最终生成的 bundle 中。</font>

#### 打包命令

全量编译

```bash
$ npm run build
```

快速编译

```
$ npm run build:fast
```

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