Skip to content

Commit be1ae39

Browse files
committed
revise partial bundle section
1 parent d36b491 commit be1ae39

File tree

1 file changed

+38
-21
lines changed

1 file changed

+38
-21
lines changed

README.md

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -70,36 +70,53 @@ and use the plotly.js `dist` file(s). More info [here](https://github.com/plotly
7070

7171
#### Read the [Getting started page](https://plotly.com/javascript/getting-started/) for more examples.
7272

73-
## Modules
73+
## Partial bundles
7474

75-
Starting in `v1.15.0`, plotly.js ships with several _partial_ bundles (more info [here](https://github.com/plotly/plotly.js/blob/master/dist/README.md#partial-bundles)).
75+
There are two kinds of plotly.js partial bundles:
76+
1. The official partial bundles that are distributed to `npm` and `CDN` covered by [the dist README](https://github.com/plotly/plotly.js/blob/master/dist/README.md).
77+
2. The custom ones that could be created by the user, if none of the distributed packages meet your needs.
7678

77-
Starting in `v1.39.0`, plotly.js publishes _distributed_ npm packages with no dependencies. For example, run `npm install plotly.js-geo-dist` and add `import Plotly from 'plotly.js-geo-dist';` to your code to start using the plotly.js geo package.
78-
79-
If none of the distributed npm packages meet your needs, and you would like to manually pick which plotly.js modules to include, you'll first need to run `npm install plotly.js` and then create a *custom* bundle by using `plotly.js/lib/core`, and loading only the trace types that you need (e.g. `pie` or `choropleth`). The recommended way to do this is by creating a *bundling file*. For example, in CommonJS:
80-
81-
```javascript
82-
// in custom-plotly.js
83-
var Plotly = require('plotly.js/lib/core');
84-
85-
// Load in the trace types for pie, and choropleth
86-
Plotly.register([
87-
require('plotly.js/lib/pie'),
88-
require('plotly.js/lib/choropleth')
89-
]);
79+
Use `traces` option to create a custom bundle of desired traces.
80+
```
81+
npm run partial-bundle -- --traces scatter,scattergl,scatter3d
82+
```
83+
Please note that `scatter` trace is currently added to the bundle by default.
84+
[Whereas this behaviour may be subject to change in future](https://github.com/plotly/plotly.js/pull/5535), we recommend that you explicitly include `scatter` trace in your scripts in case `scatter` trace is needed in your bundle.
9085

91-
module.exports = Plotly;
86+
If not specified otherwise all transforms are included in the bundle.
87+
Use `transforms` option to specify which transforms should be included.
88+
```
89+
npm run partial-bundle -- --transforms sort,filter
9290
```
9391

94-
Then elsewhere in your code:
92+
Use `transforms none` option to exclude all transforms.
93+
```
94+
npm run partial-bundle -- --transforms none
95+
```
9596

96-
```javascript
97-
var Plotly = require('./path/to/custom-plotly');
97+
Use `out` option to change default `custom` bundle name.
98+
```
99+
npm run partial-bundle -- --out myBundleName
98100
```
99101

100-
Alternatively you could browserify a custom bundle of desired trace modules e.g. `pie` and `choropleth` using
101-
`npm run partial-bundle pie choropleth --name=custom`
102+
Use `unminified` option to create an `unminified` bundle.
103+
```
104+
npm run partial-bundle -- --unminified
105+
```
102106

107+
### Example illustrating use of different options together
108+
To create `unminified` custom bundle named `myScatters` including `scatter`, `scattergl` and `scatter3d` traces without any transforms:
109+
```
110+
npm run partial-bundle -- \
111+
--unminified \
112+
--out myScatters \
113+
--traces scatter,scattergl,scatter3d \
114+
--transforms none
115+
```
116+
Or simply on one line:
117+
```
118+
npm run partial-bundle -- --unminified --out myScatters --traces scatter,scattergl,scatter3d --transforms none
119+
```
103120

104121
## Building plotly.js
105122

0 commit comments

Comments
 (0)