Writing in the front

Here, I believe you have a certain understanding of the tools to be used for CLI construction. If you are unfamiliar with the corresponding tools, you can move on to the previous articles in this column. There is a corresponding introduction.

Starting with this article, we will take steps to implement some of the features in the CLI.

Build commands

In Varlet-CLI, we use gen as our build command, but let’s start with what gen is.

Gen is short for generate, similar to vuecli’s well-known create, used to create a component library project.

Of course, you can use any command name you like. Here we’ll use Gen as our build command.

preparation

Let’s first adjust the directory structure of the project.

  • Generators: Hold template files for gen commands to build projects

  • Site: used to store document sites

  • SRC: Needless to say, the core of the CLI is here

For generators and sites, please visit our code repository. For generators and sites, please visit our code repository

Old commander

The basic use of Commander was introduced in Advanced: Useful Tools part 1, and now it’s time to put it to the test.

Step1. Reference

import { Command }  from "commander"

const program = new Command()

program.version(require('.. /package.json').version, '-v, --version')

program.parse()
Copy the code

Create the gen command

We expose a gen method in SRC/Commands /gen to handle gen commands

export function gen(name:string){
   // some code do gen action
}
Copy the code

Then we use the gen method in the entry file.


import { gen } from './commands/gen'

program.command('gen <name>').description('Generate cli application').action(gen)
Copy the code

Gen what to do

Now that the command is in place, let’s clarify what Gen is going to do:

  • Receives the project name entered by the user
  • Check whether a directory with the same name already exists in the current directory. If yes, a message is displayed. If no, continue the process
  • Prompts the user to select a template
  • Copy the selected template to the destination directory
  • A message is displayed indicating that the creation is complete

We will follow the steps above to implement Gen step by step

The same test

We accept the name entered by the user, and spliced the final path, and detected the existence of the path through the pathExistsSync method of FS-Extra.

Prompt and terminate the program if it exists.

const dest = resolve(process.cwd(), name)
if(pathExistsSync(dest)){
    logger.warning(`${name}already exists and cannot be recreated... `)
    return
}
Copy the code

Let’s try Gen in the same directory as the write-CLI project

Select a template

We use inquirer to edit the interaction

const ret = await inquirer.prompt([
  {
    name: 'Please select your component library programming style'.type: 'list'.choices: ['sfc'.'tsx'],},])const choice = ret['Please select your component library programming style']
Copy the code

“Choice” is similar to the template the user chose

Copy the template

We define the template directory, then take the project’s base file directory and template directory, and copy them into the directory that defines the project.

export const GENERATORS_DIR = resolve(__dirname, '.. /.. /generators')

const generator = resolve(GENERATORS_DIR, choice)
const base = resolve(GENERATORS_DIR, 'base')

await copy(base, dest)
await copy(generator, dest)
Copy the code

This completes the creation of the project.

Prompt to complete

But isn’t it a little unfriendly to do it all at once? Let’s add a hint.

logger.success('Application generated successfully! ')
logger.info(`\
  cd ${name}
  yarn
  yarn dev`)
  logger.success(`\ ======================= Good luck have fun =======================\ `)
Copy the code

The last

So that’s what the gen command is about. Compared to the gen command in varlet-cli, it deletes some content that does not affect normal creation.

Please refer to the dependent version for more details on Gen, the logger used in this article