TypeScript module structure in JS with Webpack

Question

I'm trying to publish a TypeScript library using webpack and with a folder structure like:

src/
    module1/
        some-class.ts
        index.ts
    module2/
        some-other-class.ts
        index.ts
    etc/

If used in TS, I should be able to do:

import { SomeClass } from 'my-library/module1';

And when using require, should be able to do:

const SomeClass = require('my-library/module1');

Webpack needs an entry (or multiple entries) and outs files matching those entries. However, I see defining entries for every nested folder very impractical, and also don't know how to make deep nested entries like require('my-library/module1/submodule1/etc').

Also, authored that way, it might not follow the dts files outputted by the ts-loader.

What am I missing here? Is there a way to make webpack replicate the module structure of the TS sources?

Am I using the wrong tool?

If so, what do people use to bundle libraries?

Duplicate of stackoverflow.com/questions/54357435/…

Karol Majewski
– Karol Majewski

2019-02-11 16:31:33 +00:00
Commented Feb 11, 2019 at 16:31 — Karol Majewski
– Karol Majewski, Commented Feb 11, 2019 at 16:31
would be great if you can accept the answer :)

Nicolas Gehlert
– Nicolas Gehlert

2019-02-18 15:32:53 +00:00
Commented Feb 18, 2019 at 15:32 — Nicolas Gehlert
– Nicolas Gehlert, Commented Feb 18, 2019 at 15:32

Nicolas Gehlert · Accepted Answer · 2019-02-11 16:28:44Z

2

+100

I think you can just create an index.ts file in your toplevel src/ directory and export every subfolder from there, for example export * from 'module1';

And when you create a new module you simply need to add the a new line to export the proper directory.

On a side note, if you want to export something from your top level that is actually deeper inside a module you can use the following syntax export { myFunc } from './module1/nested/myFunc';

In that case your use can require('myLibrary/myFunc') instead of require('myLibrary/module1/nested/myFunc')

Edit: As pointed out by @Dehli those index files are called Barrels (https://basarat.gitbooks.io/typescript/docs/tips/barrel.html)

edited Feb 11, 2019 at 16:28

answered Feb 11, 2019 at 16:20

Nicolas Gehlert

3,3031 gold badge27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript module structure in JS with Webpack

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related