BUILDING.md

Building plotly.js

Webpack

For plotly.js to build with Webpack you will need to install [email protected]+ and add it to your webpack.config.json. This adds Browserify transform compatibility to Webpack which is necessary for some plotly.js dependencies.

A repo that demonstrates how to build plotly.js with Webpack can be found here. In short add ify-loader to the module section in your webpack.config.js:

...
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'ify-loader'
            }
        ]
    },
...

Browserify

Given source file:

// file: index.js

var Plotly = require('plotly.js');

// ....

then simply run,

browserify index.js > bundle.js

to trim meta information (and thus save a few bytes), run:

browserify -t path/to/plotly.js/tasks/util/compress_attributes.js index.js > bundle.js

Angular CLI

Currently Angular CLI uses Webpack under the hood to bundle and build your Angular application. Sadly it doesn't allow you to override its Webpack config in order to add the plugin mentioned in the Webpack section. Without this plugin your build will fail when it tries to build glslify for WebGL plots.

Currently 2 solutions exists to circumvent this issue:

1. If you need to use WebGL plots, you can create a Webpack config from your Angular CLI project with ng eject. This will allow you to follow the instructions regarding Webpack.
2. If you don't need to use WebGL plots, you can make a custom build containing only the required modules for your plots. The clean way to do it with Angular CLI is not the method described in the Modules section of the README but the following:

// in the Component you want to create a graph
import * as Plotly from 'plotly.js';

// in src/tsconfig.app.json
// List here the modules you want to import
// this example is for scatter plots
{
    "compilerOptions": {
        "paths": {
            "plotly.js": [
                "../node_modules/plotly.js/lib/core.js",
                "../node_modules/plotly.js/lib/scatter.js"
            ]
        }
    }
}