6

There are two packages plotly.js and plotly.js-dist.

What is the difference between them and which one should I use?

Moreover on npmjs.org on plotly.js page it says in order to install plotly.js one have to run:

npm install plotly.js-dist

I mean, I can see that plotly.js is a project with many files, and that plotly.js-dist is a bundle, just one file. But I don't get why it is distributed like this.

Especially, that plotly.js-dist is not minified, and in plotly.js there is minified file, which I guess can be used in order to import this library to one's project.

matvs
  • 1,763
  • 16
  • 26

1 Answers1

4

These files are same. I checked and compared.

If you using npm + typescript(+Angular), I recommend to use option , npm install plotly.js-dist.
If you using npm(or not) + javascript, I recommend to use option 3 with plotly.min.js.

Don't mention minified or not. Because after bundling every module minified.
So, it's up to you which file need to see via developer tool while debugging.

Here is Quick start options.

  1. Install with npm : npm install plotly.js-dist.
    • Ready-to-use plotly.js distributed bundle.
    • Contains trace modules, visit here
  2. Use the plotly.js CDN hosted by Fastly.
  3. Download the latest release : plotly.js or plotly.min.js. More info here.

It doesn't matter what you choose but it is different slightly how to bundle/deploy your project.
And using definition file. @types/plotly.js
For further information from here, check Bundle information section.

Also, if you work with angular? here is another option : angular-plotly.js.


This is my answer for your second phrase.
"plotly.js" is hard to set it up for bundling. Here is what I've done with this and my goal was:

  1. Working on angular2-seed with Angular 4.
  2. Fully defined each type/interface.

Step 1. Install package.

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

Note: @types/d3 is dependency of @types/plotly.js. but if you don't need it, remove it from index.d.ts.

Step 2. rename folder to use definition file.

Rename folder "plotly.js" to "plotly.js-dist" in "node_modules/@types".

jornathan
  • 646
  • 5
  • 13
  • 1
    You'll want to install your types as a devDependency with `--save-dev` or `-D`. NOT in dependencies with `--save`. Also renaming folders in node_modules is a bad idea, unless you're sure it's a local, personal project. It's just very easy to end with a package that's out of sync across devices. – Jesse Jun 15 '22 at 06:34
  • How do you do this if you are using Yarn PNP setup? – Zaffer Dec 16 '22 at 14:16