Scaffolding tool

At present, the community is relatively well-known scaffolding, vuE-CLI, create-React-app and so on.

They all solve one class of problems, one-stop project environment configuration problems.

But there are some problems that they can’t solve, like:

1. Vue-cli focuses on the environment construction and configuration of THE VUE project. The business types of each company are different.

2, each company is not the same in the precipitation of the project, such as the precipitation of components, monitoring buried point scheme, as well as other styles, directories, services and a series of coding related precipitation, with what way, can avoid our repeated work?

3. Even the technology selection of each company is different. A team may use React and VUE, both C-side business and B-side business!

Is there a way to meet these needs? The answer is yes, we can use the way of research scaffolding to achieve the above requirements!

1, the principle of scaffolding tools

First, understand the basic function of scaffolding, one is to provide command line services, the other is to provide templates.

The so-called command line, like the vue init command provided by vue-CLI, etc.

Templates, which we use with a command to get the final project structure, can be placed directly in a directory on the professor shelf or in a repository like Github.

A scaffolding project is essentially a Node project, and node, as you know, can manipulate files, so the essence of scaffolding is to manipulate files.

Second, what is the nature of command-line operations?

Nodejs has built-in support for command-line operations. The bin field in package.json of the Node project can define command names and associated execution files.

"bin": {
    "wd": "index.js"
},
Copy the code

Third, how do templates come from?

If it’s too much trouble, create a new template directory in the scaffolding project, place our project structure in it, and then create the template directly from the command line by manipulating the file.

Another option is to download a repository on Github and use node’s package (download-git-repo) to download the repository.

The following packages need to be noted and are key to scaffolding tools:

1, commander. Js

This command provides automatic parsing of commands and arguments, merging multiple options, handling short arguments, and more.

You can write.command to specify subcommands for your top-level commands.

You can write.action to handle your subcommands accordingly.

const program = require('commander'); Program. The version (1.0.0, '-v - version). The command (' init < name >'). The action ((name) = > {} / / processing)Copy the code

Specific Chinese document: github.com/tj/commande…

2, the inquirer

The Node package can be queried at the command line of Node. For our subsequent use.

Inquirer. Prompt ([{name: 'description', message: 'Please enter project description:'}, {name: 'author', message: 'Please enter author name:'}, {name: 'template', message: 'Please input template type (PC /mobile) :'}]). Then ((answers) => {// Process the answers})Copy the code

3, the download git — repo

What this package does is it can be downloaded to a project on Github/GitLab.

const download = require('download-git-repo'); const TEMPLATE = 'https://github.com:liwudi/vue-mobile-template#master'; (TEMPLATE, name, {clone: true}, (err) => {// After downloading... })Copy the code

2. Community scaffolding scheme

The first option is to develop your own Node package

The scenario I wrote above is to create a project and publish the Node package.

All functions, their own implementation.

The second option: Yeman

Scaffolding is a community scaffolding program that incorporates some scaffolding support.

If you’re interested, you can try it

Comparison of the two schemes:

The first option is to implement everything yourself, and the nice thing is that you can do everything yourself.

The second option is to install the YO package globally and then implement your own generator, which I feel is not very convenient.

3. Personal practice

In both cases, individuals have their own practices

The first option

Git address: github.com/mapbar-fron…

Introduction: This solution will be maintained for a long time in the future. It integrates four template repositories, which are divided into react and VUE frameworks, and different frameworks are divided into PC and mobile templates.

Basic use:

Step 1 download the global CLI tool package

npm i -g wd-tools-cli
Copy the code

Step 2: Initialize the project

wd init <name>
Copy the code

Where name is the name of your project

Step 3: Select the frame type and template type

Step 4: Done and ready to start your project

Second option

Git address: github.com/mapbar-fron…

Introduction: it is a demo property of the project, if interested can be studied

First, install Yeoman and generator-wdcli using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-wdcli
Copy the code

Then generate your new project:

yo wdcli
Copy the code