DEV Community

Cover image for Write a library using TypeScript library starter
Alex Jover
Alex Jover

Posted on

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
Enter fullscreen mode Exit fullscreen mode

A prompt will show up asking your library name:

Initial prompt

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.

Dist folder

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Conventional commit

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

Top comments (5)

Collapse
 
fusemars profile image
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'"

Collapse
 
jmourtada profile image
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?

Collapse
 
alexjoverm profile image
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
Collapse
 
deanius profile image
Dean Radcliffe

Que chevere!!! - Thanks Alex!

Collapse
 
typemean profile image
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!