Load the dependent script at run-time from some URL
Bundle the dependent script in the same file together with your plugin code
We try not be be opinionated about how you have to handle your plugin dependencies. But there are some pros and cons for each method. This page will give you a small introduction on how you can manage your plugin dependencies.
The recommended way is to first load dependencies at runtime and later, when the plugin gets more major, switch to a bundled version with a separate git repository for the plugin.
Quick start: Load from URL
Loading dependencies from some URL’s is the easiest way to get started. You can find almost all dependencies at some CDN, e.g. cdnjs and unpkg. To load the dependency before your plugin get’s loaded you can just add the link to the TYPE_INFO.dependencies property (see: Plugin API → TypeInfo )
The Dashboard will take care about loading your dependencies and make sure they are all available when your plugin code gets executed.
Can I use require() or SystemJS?
Yes:RequireJS and SystemJS are module loaders. Since we do not want to bundle any module loader with the dashboard you can bundle or load any system loader by your self.
But: The module loader is one more dependency that has to be shipped and loaded with your plugin. A module loader is more useful in bigger applications with many dependencies not a small plugin that should require not more than a few dependencies.
The dashboard does not use any module loader (we bundle the dashboard using webpack).
When you bundle your dependencies, they are shipped together with the plugin js file.
When you load them at runtime, they must be available from for the client that is executing the plugin. You might want to deploy all dependencies together with your dashboard. The TYPE_INFO.dependencies property supports relativ URL’s. You can load a dependency from e.g. ./jquery.min.js and serve it next to your html page that includes the dashboards app.bundle.js
There might be reasons you do not want to rely on loading dependencies at runtime. It might be easier to share the plugin and to write reliable tests.
Tools to do the bundling are i.a. Webpack and Browserify. You will have to setup your own build process to run this tools when you want to compile your plugin. The build-in process from the dashboard will just run Babel to transpile the plugin code.
Loading scripts at run-time needs more http requests, but the browser can cache single dependencies across plugins. Loading a bundled plugin needs just a single request but a single dependency will be transferred at least once per plugin.