About front-end CLI tools

  • For Angular, there is an official Angular CLI.
  • For Vue, there is an official Vue CLI.
  • React, there is an official Create React App.

The Angular CLI and Vue CLI are officially recommended CLI tools that can be used directly in production environments, but the Create React App is a little different. Its goal is to quickly Set up a React App. Because it’s not very customizable, you might want to eject and then manually maintain the WebPack configuration.

The journey of our team

First of all, the background is that my team has been using React technology stack for several years. Our business attribute is to frequently create new projects, but the business life cycle is not necessarily short, but may be long-term.

In the beginning, I think it was about three or four years ago, when the solution was more primitive, everyone maintained their own WebPack configuration and copied and paste new projects. The advantage of this is flexibility, I can control the configuration of my own project, but the disadvantage is that it is not easy to upgrade and maintain the configuration, and there are many problems after the project handover.

Later, we used the project Boilerplate approach, maintaining a copy of the Boilerplate within the team and initializing all new projects with this Boilerplate. The advantage of webpack configuration is unified, easy to cooperate with many people, but the disadvantage is that the configuration upgrade is not easy, because the Webpack configuration is exposed in the project, the configuration will be modified by people, easy to dirty.

Then there was the Official Create React App. It turns out that the Webpack configuration can be hidden in node_modules without being exposed to the project, which is a very elegant solution. So we used a solution similar to the Create React App to Create our own team specific front-end CLI tool, which is our current solution. The advantage of this is that webpack configuration is hidden, project directory is relatively clean, webpack configuration is easy to upgrade, only need to upgrade the CLI, the disadvantage is that CLI maintenance is a big project, need more manpower, and need to step on a lot of pits.

I recommend it

Back to the title of the article: Building a Front-end Team React CLI Tool, I believe that every front-end team should have their own CLI tool, which is an important base for team skills and experience.

CLI tools can do a lot of work, such as initiating a project, developing, testing, packaging, deploying, component development, etc. In other words, CLI tools can be involved in the entire development life cycle, so it is an important base for the team’s technology and experience.

The highlight here is the scaffolding that the CLI takes on. The Create React App is great, but I wouldn’t recommend using it directly as a team tool, nor would I recommend implementing a Create React App from scratch (especially for a small front-end team). My advice is based on the Create React App. Why? Because the Create React App is stable enough, the probability of problems is low. Standing on the shoulders of giants, you can save a lot of energy and put more energy into business problems.

Create a CLI using the Create React App

Here is a CLI I created using the Create React App:

Installation:

yarn global add dahlia-cli
Copy the code

Initialization project:

dh new myapp
Copy the code

Project Contents:

. ├ ─ ─ the README. Md ├ ─ ─ package. The json ├ ─ ─ pages │ └ ─ ─ index. The TSX └ ─ ─ tsconfig. JsonCopy the code

Start the development server:

cd myapp
dh start
Copy the code

The principle is very simple. In fact, the Create React App is customized to make it suitable for your team, but your tool is closely related to the React community and has good stability.

For those interested in details, see Dahlia-CLI.