Tutorial: Develop a cli for web development

Nicolas Xiao
2 min readDec 7, 2020

As the front-end leader of a R&D team, this article shares my design and development ideas about front-end cli tools, and I hope it will be helpful to you.

When we develop a front-end project, we face a series of challenges:
For example: we first need to initialize a project, then configure our project dependencies, write webpack configuration according to the technology stack used by the project, and start to write some framework code,
At the same time, if there is a multi-person development model, we are also faced with how to standardize the code and how to standardize git submission.
All these tasks are done, you think everything is fine.
In fact, no, you still need to face a challenge: when there are multiple people working together, some people may modify your webpack configuration and eslint configuration for some reason. This leads to the invalidation of the norms you have established, resulting in all kinds of inconsistencies.

At this time, a front-end cli tool is required to simplify the development process and establish mandatory constraints.
Our front-end cli tool needs to have the following capabilities:
1. Build function
2. General project template
3. Debug development function
4. Mandatory code constraints
5. Mandatory git commit constraints
6. Code formatting

Nodejs is usually used to develop front-end cli tools. Because most front-end developers have nodejs in their development environment, and they are generally familiar with nodejs and npm. It is also possible to develop in other languages, such as golang or rust.
But this article will choose the conventional route, using nodejs development.

The following assumes that the reader is familiar with nodejs, npm development, and familiar with webpack and eslint configuration.

--

--