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 kendo-ui-core and automatically configure this as external library. The module will not be included in your library bundle.

Usage:

npm i @cc-external/kendo-ui-core

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

Remarks

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

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

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

module.exports = [
  {
    module: "@cc-external/kendo-ui-core",
    entries: [
      "dist/js/messages/kendo.messages.de-DE.min.js",
      "dist/js/cultures/kendo.culture.de-DE.min.js",
      "dist/styles/web/kendo.common-bootstrap.min.css",
      "dist/styles/web/kendo.bootstrap.min.css",
    ],
  },
];

The Style will be applied automatically. To switch the default culture for all widgets execute this at first:

kendo.culture("de-DE");

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

Here an example how to implement with jQuery:

laet path = ccExternals["kendo-ui-core"];
//Scripts
await $.getScript(
  `${path}/dist/js/messages/kendo.messages.de-DE.min.js`
);
await $.getScript(
  `${path}/dist/js/cultures/kendo.culture.de-DE.min.js`
);
//Stylesheets
$("<link>")
  .appendTo("head")
  .attr("type", "text/css")
  .attr("rel", "stylesheet")
  .attr(
    "href",
    `${path}/dist/styles/web/kendo.common-bootstrap.min.css`
  );
$("<link>")
  .appendTo("head")
  .attr("type", "text/css")
  .attr("rel", "stylesheet")
  .attr(
    "href",
    `${path}/dist/styles/web/kendo.bootstrap.min.css`
  );
//Init
kendo.culture("de-DE");