Using a custom Kendo-UI build with JSPM

Question

I'm using KendoUI in my Aurelia application. So far, we are using the Grid control and the Autocomplete control.

Attempting to import the Kendo objects through ES6 (using System.JS and the import statement) has worked well with Kendo.all.min.js, as it exports a Kendo object with all of the namespaces.

My import statement from Kendo.all.min.js is as follows:

import * as Kendo from 'kendo';

I can then use something like var datasource = new Kendo.data.dataSource() . (I've set up my config.js to point 'kendo' to the correct file using the meta section.)

Kendo.all.min.js is quite large and most of the functionality is unnecessary. I thus created a Kendo.custom.min.js file with only the components that we're using. However, attempting to import Kendo through ES6 no longer works. I no longer receive any usable properties on the imported object.

How can I have a Kendo custom build work with ES6 imports?

Answer 1

I found the answer to this - it must be specified in config.js.

Because Kendo is an AMD package by default, JSPM (and other loaders like RequireJS) needs to know what it exports. I had this in my JSPM configuration:

  meta: {
    "vendor/kendo/kendo.custom.min.js": {
      "deps": [
        "github:components/jquery@2.1.4"
      ],
    }
  },

I had to change it by adding a line:

  meta: {
    "vendor/kendo/kendo.custom.min.js": {
      "deps": [
        "github:components/jquery@2.1.4"
      ],
      "exports": "kendo"
    }
  },

...and it worked.I'm now seeing Kendo objects in my export.