Properly babel transpile a file in ember-cli-build withing additional tree

Question

I have some files in my project that I would like to move out of the normal app tree and only load in certain situations. Currently I used broccoli-stew to move the file and broccoli-babel-transpiler to transpile the destination file. However when I do this I end up with an extra default object on the imported files.

this code gets added to the top

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

var _Ember = _interopRequireDefault(_ember);

and this causes me to have to write the source file with references to ember as Ember["default"].Object etc. Would like to not have any odd references in the source files that makes it harder for other developers to understand.

This is my current ember-cli-build.js file

/* global require, module */
var stew = require('broccoli-stew');
var esTranspiler = require('broccoli-babel-transpiler');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    storeConfigInMeta: false
  });

  var additionalTrees = [];
  var appTree = app.appAndDependencies();

  if (EmberApp.env() !== "production") {
    var jQuery = stew.find(appTree, "bower_components/jquery/dist/jquery.min.js");
    jQuery = stew.mv(jQuery, "bower_components/jquery/dist/jquery.min.js", "assets/jquery.js");

    additionalTrees.push(jQuery);
  }

  function extractRouter(fileName) {
    var router = stew.find(appTree, 'mobile-web/'+ fileName + '.js');
    router = esTranspiler(router, {
      modules: "amd",
      moduleIds: true,
      moduleId: "mobile-web/router"
    });
    router = stew.mv(router, 'mobile-web/'+ fileName + '.js', 'assets/'+ fileName + '.js');
    additionalTrees.push(router);
  }

  extractRouter('router');
  extractRouter('secure-router');

  return app.toTree(additionalTrees);
};

Answer 1

Try configure your esTranspiler to use modules: "amdStrict":

router = esTranspiler(router, {
  modules: "amdStrict",// here
  moduleIds: true,
  moduleId: "mobile-web/router"
});

It's similar to "commonStrict" as described in the docs. The amdScrict exists in the source code here.