UMD With Ember-CLI

Question

I am trying to load the gridstack in my Ember application via ember-cli. I installed the application via bower and imported in my ember-cli-build.js file. It includes _ as a library via:

if (typeof define === 'function' && define.amd) {
    define(['jquery', 'lodash'], factory);
}

define.amd evaulates to false

I looked into why this is the case , and found that ember-cli's loader doesn't support UMD. On an open cli issue, Stefan Penner, one of the main cli developers, suggested:

This is by design. As this library requires a pre build step to de-anonymize the modules. That step can do the appropriate munging to work correctly

I have no clue what that means. I got around the issue by manually importing the dependencies of this library in my own ember-cli-build before this library but that's defeating the purpose of dependency management. How can I make this library resolve its own modules?

Answer 1

Latest Ember CLI blueprints for new Ember projects contain ember-auto-import. ember-auto-import is a library that allows to import any NPM library in Ember. No configuration is needed. It could also be installed in projects using an older Ember CLI version and is the recommended way.

If you don't want to install an additional dependency - even if it's part of official blueprints - Ember CLI not only supports Standard Named AMD Asset via app.import('path/to/entry-point.js') but also Standard Anonymous AMD Asset:

app.import('path/to/entry-point.js', {
  using: [
    { transformation: 'amd', as: 'your-named-import' }
  ]
});

As normal this goes into your ember-cli-build.js.

Sidenode: For some time ember-browserify was the recommended solution for CommonJS modules. But it has been deprecated in favor of ember-auto-import.