Generate moduleNames for AMD/UMD

[darvelo]

references #158, references #44

This PR allows for generating user-defined module names for AMD and UMD.

Users can define a root prefix for each module, which allows for more flexible application routing (e.g. js-client/moduleA), and can strip the source file's directory root so that module names can be relative (e.g. module name is moduleA rather than /home/user/myApp/es6/moduleA).

This meant a couple of new user-defined opts, which for now I've named:

• sourceRoot - the JS source directory to be stripped from the path
• moduleRoot - an optional prefix for each module. I've got a couple of lines for gulp-6to5 for this part that I will submit a PR for if these changes look good to go. For gulp-6to5 the changeset would be something like this:

try {
  var fileOpts = objectAssign({}, opts, {
    filename: file.path,
+    filenameRelative: file.relative,
    sourceMap: !!file.sourceMap
  });

With sourceRoot: __dirname + '/js' in gulpfile.js and moduleRoot: 'client', you'll see something like this:

Modules

// /root/js/moduleA
import moduleB from 'client/moduleB';

export default function () {
    console.log('moduleA! ' + moduleB());
}

// /root/js/moduleB
import moduleC from 'client/subdir/moduleC';

export default function () {
    return 'moduleB! ' + moduleC();
}

// /root/js/subdir/moduleC
export default function () {
    return 'moduleC!';
}

Output

define("client/moduleA", ["exports", "client/moduleB"], function (exports, _clientModuleB) {
  "use strict";

  var moduleB = _clientModuleB["default"];
  exports["default"] = function () {
    console.log("moduleA! " + moduleB());
  };
});
define("client/moduleB", ["exports", "client/subdir/moduleC"], function (exports, _clientSubdirModuleC) {
  "use strict";

  var moduleC = _clientSubdirModuleC["default"];
  exports["default"] = function () {
    return "moduleB! " + moduleC();
  };
});
define("client/subdir/moduleC", ["exports"], function (exports) {
  "use strict";

  exports["default"] = function () {
    return "moduleC!";
  };
});

index.html

<script>require('client/moduleA').default()</script> // 'moduleA! moduleB! moduleC!'

I'm not totally sure how sourcemaps work here so I haven't done anything on that front yet.

Let me know what you think! 😉

[sebmck]

Looks good! Thanks! 👍

Sorry about those houndci comments that I've since deleted, I forgot I added it.

[darvelo]

Wow @sebmck, thanks for merging! I've added a bunch more documentation to this thread so if you need me to do anything more please let me know. I'm still working my way through the codebase. I see the build is failing so I'll have to update the tests, but it's 3AM here so I need some sleep first. 😸

[sebmck]

Let me know if you have any questions (https://gitter.im/6to5/6to5), happy to have extra contributors! Pushed out a new release 1.12.17 I updated the tests/documentation and added sourceRoot and filenameRelative support to source maps.

[darvelo]

@sebmck Awesome, happy to pitch in where I can. Thanks for the amazing work.

[mattma]

@darvelo Thank you very much. It is truly awesome!

[darvelo]

@mattma Glad it works for you! @sebmck gave it the interop and polish it needed, so hats off to him too. 🎩