Create folder & Initialize project

The command to first create a folder and initialize the project information is called jj-cli

mkdir jj-cli
cd jj-cli
npm init -y
Copy the code

Then create a new bin folder, create a new JJ – CLI file under the folder, first enter the test code

#! /usr/bin/env node
console.log('hello jj-cli');
Copy the code

Then add the bin configuration to package.json

 "bin": {
    "jj-cli": "./bin/jj-cli"
  },
Copy the code

After executing NPM link on CMD, you can verify the jj-cli command. The console output “Hello Jj-cli” indicates that the first step configuration has been successful

NPM link:In the package folder, will be in the global folder{prefix}/lib/node_modules/<package>Creates a symbolic link in thenpm linkThe package that executes the command

Bin:The command is used to specify the location of the executable file corresponding to each internal command.

Starting CLI Configuration

Install project required dependencies

npm install commander 
npm install download-git-repo  
npm install shell
Copy the code

Commander a complete command line solution

Download-git-repo Downloads the git repository code

Shelljs is a library that allows you to execute shell commands in JS files

Chokidar listens for file changes

First use the COMMANDER plug-in to do a command line configuration and enter code in jJ-CLI

#! /usr/bin/env node
const { Command } = require('commander');
const program = new Command();
  program
  .option('-v, --version', ' output the version number')
  .option('-i, --init', ' init project! ')
  .option('-r, --rollup <filename> ', 'create rollup template! ')
  .helpOption('-h, --help', ' can I help you? ')
  .parse(process.argv);
  
Copy the code

Then enter jj-cli -h on the CMD command line to see the help information for the scaffolding tool we usually use

Let’s go ahead and type in the code, and then jj-cli -i and there we go we want to command

const options = program.opts();
if (options.init){
   console.log(`init project`);
}
Copy the code

To implement rollup initialization, use the jj-cli -r command to initialize the rollup template in github

#! /usr/bin/env node const { Command } = require('commander'); const download = require('download-git-repo'); const shell = require('shelljs'); const program = new Command(); program .option('-v, --version', ' output the version number') .option('-i, --init', ' init project! ') .option('-r, --rollup <filename> ', 'create rollup template! ') .helpOption('-h, --help', ' can I help you? ') .parse(process.argv); const options = program.opts(); if (options.init){ console.log(`init project`); } if (options.rollup){ shell.rm('-rf', options.rollup); download('direct:https://github.com/***/rollupcli.git', options.rollup, { clone: true }, function (err) { if(err){ console.log('download Error!! ') }else{ console.log(' create rollup template! . '); console.log('download Success!! ') console.log('you can'); console.log(`cd ${options.rollup}`); console.log(`yarn install or npm install `); }})}Copy the code

A simple scaffolding tool, and you’re done

That’s it?

Such an ugly CLI tool, and in the process of downloading, there is no loading effect, do not know whether to use the computer is too old, to jammed dead, as a front-end have the most you can tolerate such interaction? Go ahead and add some cool plug-ins to optimize the interaction of our scaffolding tools.

NPM install@darkobits /lolcatjs NPM install chalk NPM install [email protected] NPM install cfontsCopy the code

Cfonts console outputs sexy fonts

Chalk is a plugin that beautifies font color backgrounds

Darkobits/lolcatJS console generates gradient font colors

The ORA console outputs the waiting loading plug-in

Plug-ins are available. Please start your show

Cfonts will be introduced first

const CFonts = require('cfonts');
if (options.version) {
    CFonts.say('jj-cli', {
	font: '3d',              // define the font face
	align: 'left',              // define text alignment
	colors: ['greenBright','cyanBright'],          // define all colors
	background: 'transparent',  // define the background color, you can also use `backgroundColor` here as key
	letterSpacing: 0,           // define letter spacing
	lineHeight: 0,              // define the line height
	space: true,                // define if the output text should have empty lines on top and on the bottom
	maxLength: '0',             // define how many character can be on one line
	gradient: false,            // define your two gradient colors
	independentGradient: false, // define if you want to recalculate the gradient for each new line
	transitionGradient: false,  // define if this is a transition between colors directly
	env: 'node'                 // define the environment CFonts is being executed in
    });
}
Copy the code

For the configuration information of cfonts, you can refer to NPM to configure your favorite style according to your preferences.

The next plugin darkobits/ lolcatJS… , see the effect directly 😓

Ora is advised to install es module import mode for 5.3.0 version, which is used in the current version

Oh, by the way, there is another one, the help command line information of the dead ugly has not been optimized, well, without further ado, let’s go directly to the last interrupt we need to introduce chalk, let’s directly see the effect, is it much better than the initial effect?

Post code

#! /usr/bin/env node const { Command } = require('commander'); const download = require('download-git-repo'); const shell = require('shelljs'); const CFonts = require('cfonts'); const ora = require('ora'); const Printer = require('@darkobits/lolcatjs'); const package=require('.. /package.json'); const program = new Command(); const chalk = require('chalk'); Option ('-v, --version', chalk. Cyan ('🎉 output the version number')). Option ('-i, --init', Chalk. Cyan (' 🚄 init project! Option ('-r, --rollup <filename> ', chalk. Cyan ('📦 create rollup template! '). HelpOption ('-h, --help', chalk. Cyan ('🚀 can I help you? ')) .parse(process.argv); const options = program.opts(); if (options.version) { CFonts.say('jj-cli', { font: '3d', // define the font face align: 'left', // define text alignment colors: ['greenBright','cyanBright'], // define all colors background: 'transparent', // define the background color, you can also use `backgroundColor` here as key letterSpacing: 0, // lineHeight:0, // lineHeight:0 true, // define if the output text should have empty lines on top and on the bottom maxLength: 0, // define how many characters can be on one line gradient: true, // independentGradient: false, // define if you want to recalculate the gradient for each new line transitionGradient: false, // define if this is a transition between colors directly env: 'node' // define the environment CFonts is being executed in }); const newfontds = Printer.fromString(` @from xfshz version ${package.version}`); console.log(newfontds); } if (options.init){ console.log(`init project`); } if (options.rollup){const spinner = ora('⏰ download rollup template.... ').start(); download('direct:https://github.com/xflihaibo/rollupcli.git', options.rollup, { clone: true }, function (err) { if(err){ spinner.fail('download Error!! ')}else{console.log('⏰ create rollup template! . '); spinner.succeed('download Success!! ') console.log(Printer.fromString(`you can`)); console.log(`cd ${options.rollup}`); console.log(`yarn install or npm install `); }})}Copy the code

Finally complete custom scaffolding tools completed, the old rules posted code, you can do custom other operations on the basis of this, become their own scaffolding tools 🔧, come on ⛽️⛽ ⛽ Stan 🔧 🔧!

That’s it??

release

Register your account on the NPM website and log in

npm login
# Username: yourname
# Password:
# Email: (this IS public) [email protected]
# Logged in as authorname on https://registry.npmjs.org/.
Copy the code

Modify the version information of pacckage.json and publish it

npm publish
Copy the code

Through the global installation can use your custom CLI tools, strength is not surprised, meaning not unexpected, a simple version of the custom CLI scaffolding tool, so simple greatly reduced, follow-up small friends have any idea can continue to modify on this basis, to create their own CLI scaffolding tools, come on ⛽️⛽️ college ⛽ ⛽!