CODEWITHSUNDEEP
javascriptember.jscompatibilityecmascript-6ecmascript-5
zefciu
zefciu

Reputation: 2047

How to use ember.js without module support

The guides for ember.js are assuming one has the full ES6 support e.g. http://guides.emberjs.com/v2.2.0/routing/specifying-a-routes-model/ shows using the export default construct and doesn't specify any alternative way to achieve the goals. However the module feature is not implemented in all browsers that ember is supporting.

How can I use these features with a browser that doesn't support modules? How would the code in these examples translate to ES5?

Upvotes: 0

Views: 265

Answers (2)

spectras
spectras

Reputation: 13562

Documentation assumes you are using a transpiling tool, because the recommended tool, ember-cli does. Unless you have good reasons not to use it, you definitely should look into it.

It is, however, perfectly fine to work without it. For instance, without a module system, Ember will map controller:posts.index to App.PostsIndexController. So this should work for the example you linked:

App.Router.map(function() {
  this.route('favorite-posts');
});

App.FavoritePostsRoute = Ember.Route.extend({
  model() {
    return this.store.query('post', { favorite: true });
  }
});

You may also use Ember with your own module support. I successfully have an Ember project based on rollup. It does require a bit more work though, to have the resolver find your classes (that resolver link also documents how ember relates does the name mapping). Nothing hard, but you must build a short script to generate registrations.

Edit for blessenm: Ember with rollup

Unfortunately I cannot share this code, but it works like this:

  1. A script scans the project directory and compiles templates by invoking ember-template-compiler.js on every .hbs file it encounters.

  2. A script (the same one, actually) scans the project directory and generates the main entry point. It's pretty simple, if it sees, say gallery/models/collection.js and `gallery/routes/picture.js', it will generate a main file that looks like this:

    import r1 from 'gallery/models/collection.js';
import r2 from 'gallery/routes/picture/index.js';
// ...
Ember.Application.initializer({
    name: 'registrations',
    initialize: function (app) {
        app.register("model:collection", r1);
        app.register("route:picture.index", r2);
        // ...
    }
});

    It should just map your filenames to resolver names. As a bonus, you get to control how your directories are organized.

  3. Invoke rollup on the generated file. It will pull everything together. I use IIFE export format, skipping all the run-time resolution mess. I suggest you setup rollup to work with babel so you can use ES6 syntax.

I don't use any ember-specific module, but it should not be too hard to add. My guess is it's mostly a matter of setting up rollup import resolution properly. For all I know, it may work out of the box.

Upvotes: 3

Justin
Justin

Reputation: 175

You should look into using Ember CLI http://ember-cli.com/

You write your code in ES6 and it transpiles down to ES5.

Upvotes: 2

Related Questions