Organize ES6 Module Imports in Your Package

ES6 brings a new way to organize modules in JavaScript. Actually by using TypeScript, we have already been using import ... from '...'; for a long time since TypeScript 1.5 alpha.

But, this is what we get:

And it doesn't look good, especially when you need to type the module paths in varieties of files. So what's the partial solution?

The Pattern

The key is export * from '...';, and what we need to do is just using a file as the proxy of your modules.

index.ts

export { Promise } from 'thenfail';

export * from './module-a';
export * from './module-b';
export * from './module-c';

module-a.ts

import {
    Promise,
    somethingFromModuleA,
    somethingFromModuleB
} from './index';

In this pattern, you will also have better awareness of some potential issues might be caused by circular references.

Tools

At this time point, you may use either TypeScript, Babel or Traceur as ES6 module polyfill. Maybe also System.js.

Cheers and that's all. You still need to fill the name of what you've imported, and that's why I highlighted the "partial" word.