Grunt-babel with Ember.js

1

I’m working on a “legacy” - haha, a 2 years old project legacy - Ember app, where an interim step would be to migrate the code to ES6 first. My plan was using grunt-babel.

I try to reproduce almost the same transpiled code which ember-cli would generate.

Using es2015 preset and transform-es2015-modules-amd plugin, babel generates the following from an app.js.

define('my-app/app', ['exports', 'ember', 'ember/resolver', 'ember/load-initializers'], function (exports, _ember, _resolver, _loadInitializers) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  var _ember2 = _interopRequireDefault(_ember);

  var _resolver2 = _interopRequireDefault(_resolver);

  var _loadInitializers2 = _interopRequireDefault(_loadInitializers);

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  }

  var App = void 0;

  _ember2.default.MODEL_FACTORY_INJECTIONS = true;

  App = _ember2.default.Application.extend({
    modulePrefix: 'my-app',
    Resolver: _resolver2.default
  });

  (0, _loadInitializers2.default)(App, config.modulePrefix);

  exports.default = App;
});

Because of Babel 6 expect an __esModule property in the imported module, which is not exist in Ember.js modules, the above code doesn’t work. _interopRequireDefault adds an extra default to the module. _ember2.default.default.Application.extend would work in this case.

It looks to me, there is no option or plugin to turning of this transformation in babel, but maybe I just missed something. Have you played with this tool already, any idea?

And one more thing, I still have to support Internet Explorer 8! :wink:

Meanwhile I’m playing now with grunt-rollup…

2

Unfortunately, the grunt-rollup is not a solution, because it cannot generate a dynamically named modules. You can setup one moduleId, but all your transpiled module will get the same. We need my-app/app, my-app/router, etc… However, rollup.js is a really cool project.

3

Back to grunt-babel, the only solution is, if I create a custom shims.js. It define the global Ember and jQuery as ember-cli-shims would do, without default property. The question is, is there any other package which would expect 'ember' and 'jquery' modules with default?

The other two module, like 'ember/resolver' and 'ember/load-initializers' are nicely combined modules, except they don’t have '__esModule': true property, so with this shims, I just recreate this modules with that property. After this grunt-babel nicely can read and import this modules.