lundi 23 janvier 2017

Using ember with AMD modules

We have an application written using Ember, originally written against Ember 2.0.2, and have been using AMD for module management with our Ember projects since something like 0.3pre. We try to keep our Ember in a (somewhat) walled garden from the libraries installed globally by the corporate-supplied headers and footers.

To do this, we edit-in an AMD wrapper around the ember.js. (Editing the distributed JS file is admittedly a dreadful hack, and I'd welcome any alternative that minifies well with r.js but works without minification.)

Anyway, the following worked with Ember through 2.0.2 but doesn't seem to be working with 2.8.3 (LTS). First we wrap ember.js (prod or debug, take your pick.)

define(["jquery"], function (jQuery) {
    this.Ember = { imports: { jQuery: jQuery } };
  << body of ember.js >>
    return Ember;
});

and then we wrap ember-template-compiler.js:

define(["ember"], function () {
    << body of ember-template-compiler.js >>
});

We then use the template compiler to compile the templates on load in another AMD module.

This worked with 2.0.2, but when the template compiler loads with 2.8.3, we get:

Uncaught TypeError: Cannot redefine property: LOG_STACKTRACE_ON_DEPRECATION

  • Are we doing something that we should expect will no longer work?
  • Is there something I can do to make this work?
  • Can I make this work with AMD without editing the supplied JS files?
  • Can I make it so that Ember doesn't show up in the global namespace either?

I'm speaking of using Ember simply as a library, not as an ecosystem. I don't want this topic to become a debate on Ember-CLI or header pre-compilation, so just don't. (For the record, I do use Ember CLI with other projects.)

I'd like to stay focused on achieving what I'm trying to do for this project: load the latest LTS of ember-prod.js via AMD to use a noConflict jQuery, in such a way that it can compile templates at runtime and other AMD modules can consume it as a dependency, either minified (r.js) or unminified (no build step), with the narrowest global footprint possible.




Aucun commentaire:

Enregistrer un commentaire