How to build your own front-end scaffolding-detailed steps and dependency analysis

1. Brief description

As a programmer, it is to simplify complex things. The simpler the appointment, the more one-click, the better. When developing actual business, we need to build a set of operating environment, install related dependencies, and build related infrastructure and packaging Some methods and construction projects, otherwise you need to manually build each time, and this process is complicated and repetitive. Therefore, it is best to build your own development environment with one click. I believe all developers are like this. In other words, building a scaffolding CLI is the only way to go. Talk about the benefits of building scaffolding:

1. One-click build project structure
2. Standardize the project structure
3. Packaging best practices

Therefore, the blogger here introduces in detail how to build the front-end scaffolding.

2. Start building

2.1 Introduce necessary dependencies

1. chalk: Used to highlight logs printed on the terminal, generally used to print nice logs for users to see!
2. clear: Used to clear the terminal command, generally used to start the project.
3. commander: Used to parse the input command of the terminal, so that we can enter the command in the terminal and execute the code, such as vue create appName
4. download-git-repo: used to pull projects from the git repository, generally our project templates are stored in the git repository, use this library to pull
5. figlet: used to print cool logs on the terminal
6. handlebars: Lightweight semantic templates for template parsing
7. inquirer: used to inquire at the terminal, the user can answer yes/no
8. open: used to automatically open the browser
9. ora: used to display the progress bar

2.2 Writing CLI

First, after the project is initialized, install the corresponding dependencies

npm init -y
npm install -S chalk clear commander download-git-repo figlet handlebars inquirer open ora

1. Create your own bin (start command)
2. Set the commander command according to your own settings
3. Pull your own template
4. Installation dependencies
5. Automatic build start, etc.

Basically, the steps to write CLI are relatively simple, which is to write according to the basic js. It is very simple here. After that, the blogger will post his CLI address and introduce it in detail!