import - ES6 Modules: transitively exporting symbols (i.e., from imported files)

Question

Suppose I'm creating an ES6 library with multiple files, but have a root file that contains all of the top-level definitions. How could I achieve something like this example:

lib/foo/sub.js
export class Sub{}

lib/main.js
import { Sub } from './foo/sub'

client.js
# This doesn't work.
import { Sub } from 'lib/main'

I.e., where client only imports from the top-level file (since the sub levels are implementation details -- and later on will likely be encapsulated into a single minified file (but at development time are in multiple files).

Answer 1

You have to re-export:

lib/main.js
import { Sub } from './foo/sub';
export { Sub };

You can re-export directly like this:

export { Sub } from './foo/sub';

You can rename when exporting:

export { Sub as MySub } from './foo/sub';

Or re-export everything:

export * from './foo/sub';