我应该通过 npm 安装plotly.js 或plotly.js-dist 吗？

Question

有两个包plotly.js和plotly.js-dist。

它们之间有什么区别，我应该使用哪一个？

此外，在 npmjs.org 上的plotly.js页面上，它说为了安装plotly.js，必须运行：

npm install plotly.js-dist

我的意思是，我可以看到plotly.js是一个包含许多文件的项目，而plotly.js-dist是一个包，只有一个文件。但我不明白为什么它是这样分布的。

特别是，plotly.js-dist没有缩小，并且在plotly.js中有缩小的文件，我想可以使用它来将该库导入到一个项目中。

Answer 1

这些文件是相同的。我检查并比较了。

如果您使用 npm + typescript(+Angular)，我建议使用选项 , npm install plotly.js-dist。
如果您使用 npm（或不使用）+ javascript，我建议将选项 3 与plotly.min.js.

别说缩小与否。因为捆绑后每个模块都缩小了。
因此，调试时需要通过开发人员工具查看哪个文件取决于您。

这是快速启动选项。

1. 使用 npm 安装：npm install plotly.js-dist。

• 即用型plotly.js 分布式包。
• 包含跟踪模块，请访问此处

2. 使用 Fastly 托管的plotly.js CDN。
3. 下载最新版本：plotly.js或plotly.min.js。更多信息请点击这里。

您选择什么并不重要，但如何捆绑/部署您的项目略有不同。
并使用定义文件。@types/plotly.js
有关此处的更多信息，请查看捆绑信息部分。

另外，如果你使用角度？这是另一个选项： angular-plotly.js。

这是我对你第二句话的回答。
“plotly.js”很难将其设置为捆绑。这是我所做的，我的目标是：

1. 使用 Angular 4 处理 angular2-seed。
2. 完全定义每种类型/接口。

步骤1.安装包。

更改命令，谢谢@Jesse

npm install plotly.js-dist --save
npm install @types/plotly.js --save-dev
npm install @types/d3 --save-dev

注意：@types/d3 是@types/plotly.js 的依赖项。但如果您不需要它，请将其从index.d.ts 中删除。

步骤 2. 重命名文件夹以使用定义文件。

将“node_modules/@types”中的文件夹“plotly.js”重命名为“plotly.js-dist”。

更新 - 9/12/2023

这是我的环境；

• 视窗 11(x64)
• 节点 v18.17.1
• 角度 13.2.0

我推荐如下，

npm i --save plotly.js-dist-min
npm i --save-dev @types/plotly.js-dist-min

这与官方指南略有不同。

import { Component, ElementRef, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import * as Plotly from 'plotly.js-dist-min';

@Component({ ... })
export class AppComponent implements OnInit, AfterViewInit {  
  myData!: Partial<Plotly.PlotData>[];
  @ViewChild('chart') div?: ElementRef;

  ngOnInit(): void {
    this.myData = [
      {
        x: ['giraffes', 'orangutans', 'monkeys'],
        y: [20, 14, 23],
        type: 'bar',
      },
    ];
  }

  ngAfterViewInit(): void {
    const element = this.div?.nativeElement;
    Plotly.newPlot(element, this.myData);
  }
}