Pandora 通用可视化库
开发模式
@qn-pandora/pandora-visualization 为可视化依赖库,以 Phoenix 引用 @qn-pandora/pandora-visualization 为例,介绍如何开发模式。
1. 安装依赖
$ yarn install
注意:必须使用yarn install
安装依赖,不可使用npm install
。
当前 monrepo 采用 yarn workspace统一管理所有 package 的依赖,yarn.lock 文件位于顶层目录。
注意:
- 项目初始 clone 之后,至少经过一次全量编译(
yarn build
)。 - 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:
3. @qn-pandora/pandora-visualization 链接到全局
$ npm link
4. Phoenix 链接到 @qn-pandora/pandora-visualization
$ 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
中应该不包含。
约定 package.json 中peerDependencies
中的库不会被打包到最终生成的 bundle 中。
打包命令
全量编译
$ npm run build
快速编译
$ npm run build:fast
项目初始 clone 之后,至少经过一次全量编译,为了提高编译速度,以后可以采用快速编译。