Did you ever write some library code together and then wanted to publish it as an NPM package but realized you have no idea what is the technique du jour to do so?
Did you ever wonder "Should I use Webpack or Rollup?", "What about ES modules?", "What about any other package format, actually?", "How to publish Types along with the compiled code?" and so on?
Perfect! You have found the right place. In this series of articles I will try to answer every one of these questions. With example configurations for most of the possible combinations of these tools and wishes.
Technology base
This is the set of tools and their respective version range for which this tutorial is tested:
- ES2018
- Webpack >= 4
- Babel >= 7.4
- TypeScript >= 3
- Rollup >= 1
- React >= 16.8 ( code aimed at other libraries like Vue or Angular should work the same )
Some or even most of that what follows could be applied to older versions of these tools, too. But I will not guarantee or test it.
Creation
The first thing to do before publishing a library is obviously to write one. Let's say we have already done that. In fact, it's this one. It consists of several source files and therefore, modules. We have provided our desired functionality, used our favorite, modern JavaScript (or TypeScript) features and crafted it with our beloved editor settings.
What now? What do we want to achieve in this tutorial?
- Transpile modern language features so that every browser in one of the last 2 versions can understand our code.
- Avoid duplicating compile-stage helpers to keep the library as small as possible.
- Ensure code quality with linting and tests.
- Bundle our modules into one consumable, installable file.
- Provide ES modules to make the library tree-shakable.
- Provide typings if we wrote our library in TypeScript.
- Improve collaborating with other developers (from our team or, if it is an open source library, from the public).
Wow. That's a whole lot of things. Let's see if we can make it.
Note that some of these steps can be done with different tools or maybe differ depending on the code being written in TypeScript or JavaScript. We'll cover all of that. Well, probably not all of that, but I will try to cover the most common combinations.
The chapters of this series will not only show configurations I think you should use, but also will I explain the reasoning behind it and how it works. If you aren't interested in these backgrounds, there will be a link right at the top of each post down to the configurations and steps to execute without much around.
Go!
We will start with the first points on our list above. As new articles arrive, I will add them here as links and I will also try to keep the finished articles updated when the tools they use get new features or change APIs. If you find something that's not true anymore, please give me a hint.
- Transpile modern language features – With Babel.
- Compiling modern language features with the TypeScript compiler.
- Building your library: Part 1
- Check types and emit type declarations
- How to bundle your library and why
- Bundling your library with Webpack
Oh and one last thing™: I'll be using npm throughout the series because I like it. If you like yarn better, just exchange the commands.