Hello, 🙎🏻♀️🙋🏻♀ 🙆🏻♀

I love knowledge transfer and am learning to write, ClyingDeng stool!

Today I’m going to bring you webPack-CLI and its custom command-line tool 💞💞💞

The thing is, I was watching a webpack-related tutorial recently, and found that the tutorial explained how to use yargs module to parse commands in Webpack-CLI. Out of curiosity, I pulled the webpack-CLI code on the spot, and found that commander, not Yargs, was used to parse commands. 😥 😥 😥

Did I have a fake CLI? 🤔 🤔 🤔

This is not possible, at most is the version of the problem! 🤣 🤣 🤣

I looked for the webpack-CLI historical version and verified that since webpack-CLI 4.0.0, not only the directory structure has changed greatly, but also the automatic command line has been changed to Commander.

In WebPack-CLI 3, inbin/cli.jsCli parameters are parsed in the filebin/utils/convert-argv.jsFile to convert the resulting command-line arguments into webPack configuration options objects.

Webapck – 4 in clipackages/webpack-cli/bin/cli.jsTo parse CLI parameters. Use the COMMANDER module to parse CLI parameters. inpackages/webpack-cli/src/webpack-cli.tsThe run method in the.

Webpack – cli principle

In fact, webpack-CLI is the cli parameters and webpack configuration file configuration integrated into a complete configuration object.

  • Parsing command line parameters through the parsing command line module.
  • Convert command line arguments to WebPack configuration options: Webpack-cli has default parameters, which will determine whether the command line specifies the configuration file of the specific path. If the configuration file is specified, the configuration file will be executed; otherwise, the default parameters and CLI parameters will be integrated together. If there are duplicate parts, the CLI parameters will be preferred.
  • Start loading the WebPack core module, passing in configuration options, and creating Compiler objects.

Commander use

For this purpose, we use Commander, the default CLI version of WebPack 5, 4.9.2. A brief introduction to Commander.

Install the commander:

npm install commander
Copy the code

We pass parameters to Commander through the node name command, using Commander to handle the functions represented by different commands.

Commander Processing parameters

Display version number

Create a new file.js file. Let’s look at how the current version number is implemented, usually by typing -v or –version.

const { program } = require('commander')
program
  .version('1.0.0') / / version number
Copy the code

Introduce Commander, use version to pass in the version, and execute the file from the command line

node file.js -V
Copy the code

So we can see the current version number.

Logical processing

We take the absolute value of the parameter and the integer part of the parameter by processing the passed command parameter. Commander is introduced to realize the function of taking the absolute value and integer bits of parameters through command parameter transmission.

const { program } = require('commander');
/ / the absolute value
const abs=(num) = >{
  return Math.abs(num)
}
// Take the integer part
const integer = (num) = >{
  return parseInt(num)
}
Copy the code

We want to achieve by parameter function, we need to use the commander. Option () method to define the options, each option can define a short name of the option (- followed by a single character) and a long option name (-) followed by one or more words, use commas, Spaces, or | off.

program
  .option('-abs, --integer <number>') // take the absolute value
  .option('-integer --float <number>') // Take the integer part of the decimal
program.parse();
const options = program.opts();
if(options.integer ! = =undefined) console.log(abs(options.integer));
if(options.float ! = =undefined) console.log(integer(options.float));
Copy the code

Enter the command:

// Take the absolute value of the parameter node file.js - abs-1 // take the integer part of the parameter node file.js - integer-1.2Copy the code

Replace the node

Some people may have questions, we usually use webpack xx type, there is no Node to execute a file and then pass parameters.

Okay, set it up!

Initialize package in the same directory to get package.json file. Let’s add it to the file

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

Bin can be either a string or an object. If it is a string then the command is that string. In this case, we are using an object, so the command is the key of the object. Executing a key is equivalent to running the file for the value of the key.

Use the NPM link to connect the local command to the local NPM module. Once successful, we can use dy instead of a node file.

In dy.js:

#! /usr/bin/env node
const { program } = require('commander')

program
  .version('1.0.0') / / version number
  .name('testModule')
  .argument('<params1>'.Plus' 1 ') // Angle brackets indicate, for example, 
      
  .argument('<params2>'.Plus' 2 ')
  .action((params1, params2) = > {
    console.log(Number(params1) + Number(params2))
  })

program.parse(process.argv)
Copy the code

Run the command to view the version number and logic:

As you can see from the figure above, the Node xx file has been successfully replaced.

Note:

Since you use the dy custom command, you need to know that DY has been registered with the local module. Dy defaults to executing the dy.js file in the current directory. It is not possible to change the path of the dy file in package.json to replace the executable file.

You need to disconnect NPM unlink first, and then modify the link. If link does not work, you can go to your computer file path below and delete the relevant files.

The COMMANDER file of the folder is the symbol of the link.

After the deletion, you need to delete related script command files to link again.