Write a library using TypeScript library starter

Explained in a video lesson on Egghead

Have you ever written a library in JavaScript or TypeScript? Are you planning to do it? If so, you must try Typescript library starter, a starter kit that will make easy to get started while providing all features you know to write a library in Typescript.

Writing a library or project always requires some work:

• Prepare configuration: package.json, tsconfig.json, CI, bundling, build, minification, types generation...
• Testing tools: Unit test (with watch mode), coverage...
• Release versions and changelog: This is a repetitive work that takes some time
• API Docs generation

Typescript library starter solves all of that and more, plus:

• Uses latest tools: RollupJS (with tree-shaking), Prettier, Jest, TSLint, Typedoc...
• Multiple bundle generation, as described in 2ality
• Focused on automation: with a set of scripts you as a user have all the work done
• Allows automatic releases to Github and Npm by using and configuring Semantic Release
• Is already configured to work on Travis, Coveralls, generate types, and more!

Let's see how easy is to use it.

Get started

Let's start by running:

git clone https://github.com/alexjoverm/typescript-library-starter.git
cd typescript-library-starter
npm install

A prompt will show up asking your library name:

When you do so, it will configure the project for you based on the library name and your git config. It re-inits the git directory, configures rollup, package.json and your entry files (both src and test).

See it yourself! Try running npm t, it will run a sample test. Or run npm run build, it will create a dist folder with the bundle, typings file and documentation.

See all the commands available on the repo Readme

Now start coding. You'll see when you make a commit, your code is automatically formatted! That's thanks to Prettier :)

Automatic releases and Travis CI

We need to do some previous steps. First, make sure you've created an account on:

• npm
• Travis
• Coveralls

Also, make sure you've set the repository.url property on your package.json.

Now, run the following script:

node tools/semantic-release-prepare

The script will setup 2 githooks: commitmsg and prepush. They're convenient, since semantic release works by following conventional commit messages.

At this point, you just need to install semantic release. Answer NO to the "Generate travis.yml" question, because it is already prepared for you.

npm install -g semantic-release-cli
semantic-release setup

From now on, better use npm run commit. It will show you a prompt which is very convenient for creating a conventional commit. Note that running git commit -a without the proper commit message will fail.

You'll notice that when you run git push, the exactly same command that Travis CI runs is run locally on your machine, so you can see early if the build will fail.

Wrapping up

We haven't dived into any kind of configuration, but we were able to not only write a dummy library, but also make sure all quality steps (linting, testing, coverage) are asserted and that we can create bundles, builds, typings and all things needed for a TypeScript library.

Not only that, but also how to make maintainability easy by automating releases!

If you liked Typescript library starter, please give it a star. If you have any feedback, you can either open an issue or reach me at @alexjoverm

Comments

[Marcellin Nshimiyima]

Thanks for this easy to follow write up!
Would be great to change node tools/semantic-release-prepare to npm run semantic-release-prepare
Running node tools/semantic-release-prepare throws a "Cannot find module '.../tools/semantic-release-prepare'"

[Jonathan Mourtada]

Good write up and a nice starter kit. Just of curiosity did you choose Rollup over Webpack? If so, what are you thought about Rollup vs Webpack?

[Alex Jover]

I switched at some point, see the Twitter thread and an article showing both pros

In short, I don't say one is better than another:

Rollup:

• Very simple
• A bit more efficient
• Scope hoisting (although Webpack 3 has it already)
• It does what it does, nothing else
• Bottom line: perfect for libs or very small projects

Webpack:

• Great community
• Does really a lot of stuff (assets management, support all filetypes, code splitting...)
• Scales very well as project grows
• A bit complex (perhaps the new cli helps about it)
• Bottom line: perfect for any app/project, specially medium/big

[Dean Radcliffe]

Que chevere!!! - Thanks Alex!

[Typescript Mean]

Hi, I have a question, what exactly does the treeshaking in rollupJS do? How is it different from just a regular index.ts file as described in how-to-write-a-typescript-library....? Thanks!