Writing Your Own TypeScript CLI

Writing CLIs feels like a superpower

Image by author

TL;DR

• 🍳 You can write a CLI with ease. It’s simpler than you might think:)
• 🗼 We’ll write a CLI together to generate a Lighthouse performance report.
• 🔦 You’ll see how to configure TypeScript, ESLint, and Prettier.
• 📚 You’ll see how to use some awesome libraries like chalk and commander.
• 🧑‍🔬 You’ll see how to spawn multiple processes.
• 🚀 You’ll see how to use your CLI in GitHub Actions.

Real-world Use Case

Lighthouse is one of the most popular dev tools to gain insight to webpage performances. It offers a CLI and node module so we can run it programmatically. However, you’ll notice the Lighthouse scores vary if you run it multiple times on the same webpage. That’s because there’s a known variability. There’re many factors that play into the Lighthouse variability. One of the recommended strategies to deal with variance is to run Lighthouse multiple times.

We’ll be working on a CLI to implement this strategy in this article. The implementation will cover:

• Running multiple Lighthouse analyses
• Aggregating data and calculating the median scores

I hope you’re excited!

Peaking The Project’s File Structure

This is how the file structure will look like after configuring the tooling.

my-script
├── .eslintrc.js
├── .prettierrc.json
├── package.json
├── tsconfig.json
├── bin
└── src
    ├── utils.ts
    └── index.ts

The source files are located in the /src directory. We'll compile them and output .js files in /bin directory.

The /bin directory will be the entry point of the command when your users are using the CLI. You'll learn how to configure it in a bit.

Configuring Tooling

We’ll be using Yarn as our package manager for this project. Feel free to use npm if you prefer.

Let’s initiate the project. We’ll create a directory called my-script: