npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@qn-pandora/pandora-visualization

v12.4.1

Published

Pandora 通用可视化库

Downloads

1,396

Readme

Pandora 通用可视化库

开发模式

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

1. 安装依赖

# npm is not allowed
$ yarn install

注意:必须使用yarn install安装依赖,不可使用npm install

当前 monrepo 采用 yarn workspace统一管理所有 package 的依赖,yarn.lock 文件位于顶层目录。

注意:

  1. 项目初始 clone 之后,至少经过一次全量编译(yarn build)。
  2. build @qn-pandora/app-sdk:由于@qn-pandora/pandora-visualization依赖于@qn-pandora/app-sdkyarn 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 之后,至少经过一次全量编译,为了提高编译速度,以后可以采用快速编译。