Relative Dynamic Loading with systemJS, using ES6/Babel syntax

Question

I have a module written in pure ES6 that I would like to leverage in a separate web application. The module's entry point is main.js and contains the following:

main.js

export { A } from './a';
export { B } from './b';
export { C } from './c';

When I use systemJS to import this main.js, it then attempts to resolve these dependencies local to the web application, not the module.

GET http://localhost:9000/dist/a.js 404 (Not Found)

I see there's support for relative dynamic loading already, but it involves passing an extra function to the System.import function, which I'm not using--I'm using ES6 syntax.

Are there any examples or best practices of how to do this? Please and thank you.

Answer 1

The best method for this is to hack* your config.js file. We need to register a new 'repository' with systemjs that points to the location of the library of the file system. To do this, we add the following line to our config.js.

System.config({
  "map": {
    ...
    "lib": "path/to/lib/main"
    ...
  }
});

When systemjs tries to load lib, it finds the map entry and loads all dependencies of lib relative to that location. If the library is in an unreasonably distant location, it may be useful to create a directory symlink in your application to the library.