Configuration Package for @codecoupler/cc-webpack-externals-plugin

If you use the plugin @codecoupler/cc-webpack-externals-plugin in your Webpack configuration you can install with this package the NPM module golden-layout and automatically configure this as external library. The module will not be included in your library bundle.

Usage:

npm i @cc-external/golden-layout

The version number of this package matches the major and minor number of the module golden-layout that is included as dependency. The patch number do not correspond to the module patch number.

Fork used

For now this package use the fork https://github.com/genesiscommunitysuccess/golden-layout.git because of the fixed issue https://github.com/golden-layout/golden-layout/issues/681.

Remarks

This Package include the compiled Version of golden-layout and the origin module is not needed. Nevertheless, you have to use the module name golden-layout in your import statements.

Only the base files will be included in your externals definition. You have to add theme files by yourself.

You can do this in your webpack.externals.js:

module.exports = [
  {
    module: "@cc-external/golden-layout",
    entries: ["dist/css/themes/goldenlayout-light-theme.css"],
  },
];

If you want to load the needed stylesheet files dynamically in your code you must use the path to the module. You can read the path from the global variable ccExternals["golden-layout"].

Here an example how to implement with jQuery:

let path = window.ccExternals["golden-layout"];
$("<link>")
  .appendTo("head")
  .attr("type", "text/css")
  .attr("rel", "stylesheet")
  .attr("href", `${path}/dist/css/themes/goldenlayout-dark-theme.css`);