Using Ogma with Webpack

Download template

Using template

Check out our template repository.

File structure

For usage with Webpack we recommend you to install Ogma as an external dependency using npm. You can do that directly from your get.linkurio.us URL, from a downloaded tar.gz or even unpacked .zip archive (see npm docs on how to do it). Putting ogma.js in the sources folder of your project may result in some warnings from Webpack, that would treat it as source file.

Optional dependencies

Ogma has some optional external dependencies to make some of its features work. The optional dependencies used by Ogma is the xlsx library (to export in the XLSX format).

Ogma fetches its optional external dependencies dynamically by looking at the global scope (window) or through require. If you're using Webpack there is a good chance that none of these methods will work for you:

• Webpack avoids polluting the global (window) scope;
• Calls to require are replaced at compilation. That's why Ogma does not call require directly: to avoid having to include heavy external libraries that may not be useful to the user

If you wish to use features that require external dependencies, you need to declare them by extending the Ogma.libraries object:

Ogma.libraries[moduleName] = library;

For example, this snippet of code load the xlsx library and export a small graph:

const Ogma = require('/path/to/ogma.js');

Ogma.libraries['xlsx'] = require('path/to/xlsx.min.js');

const ogma = new Ogma();

ogma.generate
  .random()
  .then(graph => ogma.setGraph(graph))
  .then(() => ogma.view.locateGraph())
  .then(() => ogma.export.xlsx({ filename: 'my-graph.xlsx' }));

Critical dependency warning

Newer versions of webpack can show the following warning message when compiling, pointing to the ogma.js file:

Critical dependency: the request of a dependency is an expression

This warning is due to a line in Ogma that attempts to require optional dependency libraries: due to hybrid nature of the Ogma library, to run both in the client browser and in a NodeJS environment, there's an internal utility that normalize the different ways of requiring the dependencies. Webpack on his side prefers to have all the dependencies statically defined and showing a warning in case a dynamic require is used. This is of no harm for the user.