You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: BUILDING.md
+6-5Lines changed: 6 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,7 @@
1
1
# 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.
3
5
4
6
## Browserify example
5
7
@@ -16,10 +18,7 @@ then simply run
16
18
browserify index.js > bundle.js
17
19
```
18
20
19
-
20
-
21
-
The sections below provide additional info in respect to alternative building frameworks.
22
-
21
+
---
23
22
## Webpack
24
23
25
24
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]
39
38
...
40
39
```
41
40
41
+
---
42
42
## Angular CLI
43
43
44
44
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 = {
99
99
100
100
It's important to set `projects.x.architect.build.builder` and `projects.x.architect.build.options.customWebpackConfig`.
101
101
If you have more projects in your `angular.json` make sure to adjust their settings accordingly.
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:
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:
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.
0 commit comments