8000 add CUSTOM_BUNDLE file, how to install deps, more edits · plotly/plotly.js@d6b5498 · GitHub
[go: up one dir, main page]
Skip to content

Commit d6b5498

Browse files
archmojarchmoj
committed
add CUSTOM_BUNDLE file, how to install deps, more edits
1 parent a2bccfd commit d6b5498

File tree

4 files changed

+64
-49
lines changed

4 files changed

+64
-49
lines changed

‎BUILDING.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Alternative ways to require or build plotly.js
2-
Depending on your needs, to bundle plotly.js into your application one of [the browserified distributed plotly.js packages](https://github.com/plotly/plotly.js/blob/master/dist/README.md) on npm could be used.
2+
Depending on your needs you may require/import one of [the distributed plotly.js packages](https://github.com/plotly/plotly.js/blob/master/dist/README.md) or [a plotly.js/lib index file](https://github.com/plotly/plotly.js/tree/master/lib) and integrate it into your application.
3+
4+
The sections below provide additional info in respect to alternative building frameworks.
35

46
## Browserify example
57

@@ -16,10 +18,7 @@ then simply run
1618
browserify index.js > bundle.js
1719
```
1820

19-
20-
21-
The sections below provide additional info in respect to alternative building frameworks.
22-
21+
---
2322
## Webpack
2423

2524
For plotly.js to build with Webpack you will need to install [ify-loader@v1.1.0+](https://github.com/hughsk/ify-loader) and add it to your `webpack.config.json`. This adds Browserify transform compatibility to Webpack which is necessary for some plotly.js dependencies.
@@ -39,6 +38,7 @@ A repo that demonstrates how to build plotly.js with Webpack can be found [here]
3938
...
4039
```
4140

41+
---
4242
## Angular CLI
4343

4444
Since Angular uses webpack under the hood and doesn't allow easily to change it's webpack configuration, there is some work needed using a `custom-webpack` builder to get things going.
@@ -99,3 +99,4 @@ module.exports = {
9999

100100
It's important to set `projects.x.architect.build.builder` and `projects.x.architect.build.options.customWebpackConfig`.
101101
If you have more projects in your `angular.json` make sure to adjust their settings accordingly.
102+
---

‎CUSTOM_BUNDLE.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Custom bundle
2+
You can simply make custom bundles yourself, if none of the [distributed packages](https://github.com/plotly/plotly.js/blob/master/dist/README.md) meet your needs, or you want to make a more optimized bundle file with/without specific traces and transforms.
3+
4+
Install plotly.js, move to plotly.js folder then install plotly.js dependencies:
5+
```sh
6+
npm i plotly.js@2.0.0-rc.2
7+
cd node_modules/plotly.js
8+
npm i
9+
```
10+
11+
By default all traces and transforms are included in the bundle if you simply run:
12+
```sh
13+
npm run partial-bundle
14+
```
15+
16+
Use the `traces` option to include just the trace types you need.
17+
```sh
18+
npm run partial-bundle -- --traces scatter,scattergl,scatter3d
19+
```
20+
Please note that the `scatter` trace is currently included in all bundles and cannot be removed.
21+
[This behaviour may change in the future](https://github.com/plotly/plotly.js/pull/5535), so we recommend that you explicitly include `scatter` anyway if you need it in your bundle.
22+
23+
Use the `transforms` option to specify which should be included.
24+
```sh
25+
npm run partial-bundle -- --transforms sort,filter
26+
```
27+
28+
Or use `transforms none` to exclude them all.
29+
```sh
30+
npm run partial-bundle -- --transforms none
31+
```
32+
33+
Use the `out` option to change the bundle filename (default `custom`).
34+
The new bundle will be created in the `dist/` directory and named `plotly-<out>.min.js` or `plotly-<out>.js` if unminified.
35+
```sh
36+
npm run partial-bundle -- --out myBundleName
37+
```
38+
39+
Use the `unminified` option to disable compression.
40+
```sh
41+
npm run partial-bundle -- --unminified
42+
```
43+
44+
# Example illustrating use of different options together
45+
To create an unminified custom bundle named `myScatters` including `scatter`, `scattergl` and `scatter3d` traces without any transforms:
46+
```sh
47+
npm run partial-bundle -- \
48+
--unminified \
49+
--out myScatters \
50+
--traces scatter,scattergl,scatter3d \
51+
--transforms none
52+
```
53+
Or simply on one line:
54+
```sh
55+
npm run partial-bundle -- --unminified --out myScatters --traces scatter,scattergl,scatter3d --transforms none
56+
```

‎README.md

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -94,50 +94,7 @@ Load relevant MathJax (v2) files *Before* the plotly.js script tag:
9494
## Bundles
9595
There are two kinds of plotly.js bundles:
9696
1. Complete and partial official bundles that are distributed to `npm` and the `CDN`, described in [the dist README](https://github.com/plotly/plotly.js/blob/master/dist/README.md).
97-
2. Custom bundles you can create yourself, if none of the distributed packages meet your needs.
98-
99-
Use the `traces` option to include just the trace types you need.
100-
```sh
101-
npm run partial-bundle -- --traces scatter,scattergl,scatter3d
102-
```
103-
Please note that the `scatter` trace is currently included in all bundles and cannot be removed.
104-
[This behaviour may change in the future](https://github.com/plotly/plotly.js/pull/5535), so we recommend that you explicitly include `scatter` anyway if you need it in your bundle.
105-
106-
By default all transforms are included in the bundle.
107-
Use the `transforms` option to specify which should be included.
108-
```sh
109-
npm run partial-bundle -- --transforms sort,filter
110-
```
111-
112-
Or use `transforms none` to exclude them all.
113-
```sh
114-
npm run partial-bundle -- --transforms none
115-
```
116-
117-
Use the `out` option to change the bundle filename (default `custom`).
118-
The new bundle will be created in the `dist/` directory and named `plotly-<out>.min.js` or `plotly-<out>.js` if unminified.
119-
```sh
120-
npm run partial-bundle -- --out myBundleName
121-
```
122-
123-
Use the `unminified` option to disable compression.
124-
```sh
125-
npm run partial-bundle -- --unminified
126-
```
127-
128-
### Example illustrating use of different options together
129-
To create an unminified custom bundle named `myScatters` including `scatter`, `scattergl` and `scatter3d` traces without any transforms:
130-
```sh
131-
npm run partial-bundle -- \
132-
--unminified \
133-
--out myScatters \
134-
--traces scatter,scattergl,scatter3d \
135-
--transforms none
136-
```
137-
Or simply on one line:
138-
```sh
139-
npm run partial-bundle -- --unminified --out myScatters --traces scatter,scattergl,scatter3d --transforms none
140-
```
97+
2. Custom bundles you can create yourself to optimize the size of bundle depending on your needs. Please visit [CUSTOM_BUNDLE](https://github.com/plotly/plotly.js/blob/master/CUSTOM_BUNDLE.md) for more information.
14198

14299
---
143100
## Alternative ways to require or build plotly.js

‎tasks/test_syntax.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,7 @@ function assertFileNames() {
227227
base === 'CHANGELOG.md' ||
228228
base === 'SECURITY.md' ||
229229
base === 'BUILDING.md' ||
230+
base === 'CUSTOM_BUNDLE.md' ||
230231
file.indexOf('mathjax') !== -1
231232
) return;
232233

0 commit comments

Comments
 (0)
0