Disqus Comments

tristanMatthias • 7 years ago

Thanks! Very useful article. You have a donation link? I wanna buy you a beer/coffee!

Marco Botto • 7 years ago

Thanks for the kind words! Unfortunately I don't have a way to accept donations. This might change in the future, and in case I'll let you know.

Otacon Kiko • 8 months ago

Hey there, thanks a lot. With this article I made a huge step forward in my library upgrade.
But I really can't believe I can't use Webpack and all the features (especially minification) and get the same output I get from the tsc...

Otacon Kiko • 8 months ago

Update: basically if you want a tree-shakeable library, you can't use webpack.
It's just how it's made and how it collects dependencies and stuff.
I'm exploring esbuild

호돌 • 2 years ago

Thank you,
Following your guide, I defined a simple typescript class, compile and I got a main.js file in the _bundles directory. However, I can not import the class in the browser.
I tried something as follow:
<html>
<body>
...
<script type="module">
import { MyClass } from './bundles/main.js;
const mc = new MyClass();
mc.someMethod();
</script>
</body>
<html>

Can you please show me an example of using the bundled library in browser?

Dương Đức Trọng • 3 years ago

i read your post and i think it's awesome. It's clear and easy to understand

Magnus Brzenk • 5 years ago

Thanks so much! I was struggling getting all the fiddly settings right, it was nice to build off something that actually works!

Luna • 5 years ago

Thanks for your sharing! It's pretty clear for me!

Yan frankly • 5 years ago

cool

Nishan Bende • 6 years ago

Thank you very much, this was very helpful

Sam Huang • 6 years ago

Thanks,
Does there is a demo about this article?

Ryan Chen • 7 years ago

Hey Marco, thanks for the cool article and this helps me when I started my first Typescript library. i am inspired and created this github repo https://github.com/ryancat/... to help more people quickly start on their typescript libraries.

If you like it, could you add a link to that repo in your article to help passing the message around? Thanks!

aflorescu • 7 years ago

awesome! thank you!

Simon Buchan • 7 years ago

Nowadays I would recommend using the new in babel 7 (still in beta) preset-typescript in webpack, and leave the type-checking to your editor and tsc --noEmit in CI.
You get a bunch of nice features such as preset-env targeting, access to pre-stage-3 proposals, and your live-edit loop is much faster (because no type-checking, which is still an option with tsc --transpileOnly).
On the other hand, it doesn't support const enum or namespace, since they require type-info, which is a bit sad.

Marco Botto • 7 years ago

Yeah, typescript development is ever changing (fortunately) and now that babel is about to support typescript with the preset, this strategy definitely needs rethinking. On the other hand, not being able to rely on all ts because of this is a pain, and so far for me it's still better to let `tsc` transpile, even tho I lose some speed (and cutting edge proposals).

Mithun H.A • 7 years ago

Hi Can we bundle typescripts and watch using pm2, awaiting your response

Sterling Camden • 8 years ago

i was able to use ts-loader instead of awesome-typescript-loader to produce both the bundle and declaration files at once with no need for a separate tsc process. also checkout out https://www.npmjs.com/packa... for a possible way to bundle those declarations all into one.

Marco Botto • 8 years ago

Great, I'll take a look! How are finding `ts-loader`? Cause I started out with `ts-loader` and then switched over to `awesome-typescript-loader` as it was faster and was easier to setup.

Sterling Camden • 8 years ago

i should also mention i'm on webpack 3 so there may be a difference since the new releases

Sterling Camden • 8 years ago

so far so good! i also had ATL because of claimed perf enhancements but i haven't noticed a slow down with ts-loader. i read some github issues that actually showed faster results from ts-loader, so maybe the perf issues were a previous problem and they've now caught up. i know ATL does some caching so maybe there's a difference there.

in terms of ease ts-loader was pretty straight forward, just needed to add the babel-loader as their docs say (which frankly i think is clearer. i spent hours wondering how my app was getting babeled before i realized that ATL does it magically).

anyway thanks for this article! you helped me solve a bunch of problems with publishing private react component libraries!

Gabriele Rossetti • 8 years ago

Really good stuff ! Thank you !

I would only change the directory structure to contain a test folder too, to store tests, that normally won't get into the dist packages.
I usually setup tests to work using the "dist" final build, just not to have any surprise after publishing the package :)

In this setup I would move the tsconfig.json from the root folder to the src folder (modifying all needed paths accordingly), and I would add a new "test" directory under the root.
The tests should be ran against all the packages, to be shure of the results, so even the tests dir should be treated as an "app" to be built using all the library flavors. Am I correct ? What do you think about it ?

Patrick E. Bührmann • 8 years ago

I'm creating a library pretty much using the same configuration described in your post. However my library needs both Leaflet and pixi.js to work. What would my configuration have to look like so that my library consumes these external libraries without actually having to bundle them with mine?

Marco Botto • 8 years ago

You need to use the `externals` props in the webpack config, so it knows not to bundle them. You can specify the package name in the various formats and webpack uses that in the different builds:


	externals: {
		"react": { root: 'React', amd: 'react', commonjs2: 'react', commonjs: 'react' }
	}

You can find more info here: https://webpack.js.org/conf...

Patrick E. Bührmann • 8 years ago

Awesome works like a charm, thanks

Ben Kinsey • 8 years ago

how do i get the bundles to include the *.d.ts file or files? Ideally I'd like to include that with my bundle also. Possible?

Marco Botto • 8 years ago

Unfortunately it's not possibile afaik, and that's why we need to compile 3 times instead of twice.

Ahmet Eroglu • 7 years ago

Hello, thanks for the very helpful guide!
i just have one question I wanted to ask and any help would be greatly appreciated..

When i compile all of my typescript files I get an single bundle.js file and if i want to use this as a library, methods of this js library is not auto suggested, however if i write them manutally and run the code, methods are working fine, how can i make this messy bundle.js look better?