Create a React/Vue project using create-react-app and vue-CLI. Use Node to create a React/Vue project. Use node to create a React/Vue project.

Here is a simple Node.js script:

#! /usr/bin/env node

console.log('Hello CLI');
Copy the code

To better interact with the command line interface, we chose to use the COMMANDER portal

yarn install commander
Copy the code

Then write the functions to be implemented on the CLI

import * as commander from "commander";
commander
  .version(version, "-V, --version")
  .usage("[Options] | [Commands] <file>")

commander
  .command('init')
  .description('generation a webpack project')
  .option('dir')

commander
  .command('view')
  .description('generation a react component')
  .option('<file>')

commander.on('--help', function(){
    console.log('\n Examples:');
    console.log('');
    console.log('  $ snake -h');
    console.log('  $ snake init snake-demo ');
    console.log('');
  });

commander.parse(process.argv);
Copy the code

At this point, execute Node index.js -h in the console and the following screen will appear

To follow the “user as father” principle, we added helper functions that display help messages when the user executes Node index.js with no parameters

function help () {
  commander.parse(process.argv)
  if (commander.args.length < 1) return commander.help()
}
help()
Copy the code

To get user input, we chose to use an Inquirer portal

yarn add inquirer
Copy the code

Writing the init function

It is important to note that the node version needs to be >=8, and if executed in an environment smaller than 8, the following results will be obtained

Please make sure the node version is above 8.0

Here we write a setProjectName method to get the name of the project we want to create

export async function setProjectName(dir? : string) { const { projectName } = await inquirer.prompt({ name: 'projectName', message: 'input project name', }); global['projectName'] = projectName if (! projectName) { console.log('\n please input dir'.green + '\n'); await setProjectName(); } else if (fs.existsSync(projectName)) { console.log('\n the dir has exists, please input another one'.green + '\n'); await setProjectName(); } else { return projectName; }}Copy the code

Run snake init snake-demo(ps: if init is not followed by a project name, it will prompt you to create a new project)

Here I have two react templates to choose from, which are stored in the SRC directory. You can modify or choose your own template based on your needs. After selecting one of the options, the following prompts appear

Executing snake View Test in our production project directory automatically generates a Test. JSX React Component in the SRC /view directory

Ps: You can configure the bin field in package.json. The bin field specifies the location of the executable file corresponding to each internal command.

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

The executable file corresponding to snake is bin/index.js in the bin subdirectory. NPM looks for this file and creates a symbolic link under node_modules/.bin/. Since the node_modules/.bin/ directory adds the system’s PATH variable at run time, these scripts can be invoked directly with commands without paths when running NPM

At this point, our CLI tool development is complete, you can go to Github.