Re-exporting ES6 modules in TS 1.7?

Question

I'm getting a bit lost in TS re-exports. Say I create a pair of test modules;

test1.ts;

export function test1() {
    return 'test';
}

test2.ts;

export function test2() {
    return 'test';
}

I believe I should be able to then do something like this;

combined.ts;

export * from './test1';
export * from './test2';

module.exports = {
    test1: test1,
    test2: test2
};

But, no such luck. There seem to be lots of GitHub issues discussing various approaches to this, including an old hack using export import * from './test1' but they all seem to argue what the ES6 spec really means, and none actually work..

What's the right way to do a rollup like this? Am I just going down the wrong path to split a module up across files? Are namespaces more appropriate here?

Woodham

Answer 1

You shouldn’t be using module.exports when you are working with ES modules; module.exports is a part of CommonJS modules, not a part of EcmaScript modules.

Rollup, exporting directly

Your correct rollup module will simply be:

export * from './test1';
export * from './test2';

Then to use the rollup:

import * as rollup from './combined';
// or `import { test1, test2 } from './combined'`;
// or any other valid import

rollup.test1();
rollup.test2();

Rollup, adding namespace objects

If you want to export test1 and test2 with extra namespacing then use export {} syntax:

import * as test1 from './test1';
import * as test2 from './test2';
export { test1, test2 };

Then usage becomes:

import * as rollup from './combined';
rollup.test1.test1();
rollup.test2.test2();

Rollup, using different export names

You can also redirect names using as if you have some name conflict, just like with import:

export { test1 as t1 } from './test1';
export { test2 as t2 } from './test2';

Then usage becomes:

import * as rollup from './combined';
rollup.t1();
rollup.t2();

Skiba

So this makes perfect sense, except one thing -- is index.js a CommonJS thing as well? If I do my rollup in util/index.js, doing import * from '../util' doesnt work -- ../util/index does.. Is this an ES6 thing? My tsconfig is set to module: commonjs if that matters.. – Woodham

Implicit loading of an index.js file is a Node.js-specific thing. Best not to rely on that functionality, especially since you could have e.g. util.js file plus a util directory with an index.js file. – Skiba

so that's what I was about to do -- util.js in the top-level dir that does export * from 'util/<whatever' but once i have a non-trivial number of modules, my top-level will get pretty ugly.. is there a better way to split up util? – Woodham

Brilliant, many thanks for this answer. The roll up with namespace was just what I was looking for. – Gesticulate

Answer 2

It looks like you can not export everything in a module using *, not even if you use * as localModuleName.

Instead you have to name what your the combined module exports from the other modules.

// combined.ts
export {test1, test3} from './test1'; 
export {test2} from './test2';

Togs