“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Written in the beginning

Hello ~ everyone, Hello ^-^, xiaobian is back, with a new source series of topics coming. As I said in my last source code series (Axios source code series), the next series is ready – VueCli3, and here it is. (✪ ✪ omega)

This topic may be more suitable for some Vue partners to watch, or learn Vue partners may be more interested in some of it, after all, is a derivative of Vue. Of course, if you have not learned Vue, you can also read it, because it is more about Node knowledge, I believe that this column will let you learn a lot.

Those of you who have used Vue have seen the following scenario:

That’s right, the vuE-CLI scaffolding provides the convenience of interactive options that help us quickly create the infrastructure for our projects, thereby increasing our productivity. So, you’re not curious, how does the internal logic of such a thing work? How does it work? (In case you’re not curious, forget it (★ᴗ★))

In this article, I will take you into the inner world of VUe-CLI to fully understand its “past and present”. Let’s first paste a general flow chart, you can first observe it by yourself:

If you are confused by the flow chart, it doesn’t matter. After learning the whole topic, you can go back and look at it again. I believe you can see it in front of you.

Preliminary knowledge

The COMMANDER package is a complete solution to the NodeJS command line interface.

This is the introduction. What does it mean? In a nutshell, it helps you quickly parse the content of each command line and conveniently obtain the parameter information in the command line.

Let’s take a look at an example to make it more intuitive. If we need to look up the version number of a project, let’s see what Node and Commander do, respectively.

NodeJS:

console.log(process.argv[2= = ='-v' ? '1.0.0' : ' ');
Copy the code

Commander:

const program = require('commander');

program
  .version('1.0.0'.'-v, --version')
  .parse(process.argv);
Copy the code

You see that, right? The process module in Node is encapsulated to make it more convenient to use.

Of course, it has a lot of other syntax content, but we won’t talk about it here, and we’ll talk about it when we use it. For more details, you can also go directly to the official documentation.

Project preparation

Without further ado, let’s begin this chapter.

First, as always, look for a good location on your computer and create a folder, such as the Juejin-vue-CLI folder. Then create the folder structure of juejin-vue-cli/packages/@vue/cli, and initialize the package.json file in cli folder by using NPM init -y.

Why create a multi-layer structure? Er… Purely to keep the same structure as the source code, so as not to change the taste when you look at the source code later. (✪ ✪ omega)

Then go to the cli folder and create the bin/vue.js file:

#! /usr/bin/env node
console.log('Orange someone');
Copy the code

Modify package.json file:

{
  "name": "cli"."version": "3.12.1"."description": "Own cli"."main": "index.js"."bin": {
    "juejin-vue-cli": "bin/vue.js"
  },
  "scripts": {},
  "keywords": []."author": "yd"."license": "ISC"
}
Copy the code

Create project soft links

After finishing the preparation work of the project, we let the project generate a global “soft link”, which is convenient for our later development and testing.

Run the NPM link command in the CLI folder.

(If you run the NPM link command error, you can first run the NPM unlink command, then run the NPM link command, if the problem is not solved, welcome to leave a message to me.)

Then run the juejin-vue-cli command again:

From the image above, you can see that the bin/vue.js file has been executed and the contents of the file have been output.

The “name” of the juejin-vue-cli command we executed corresponds to the bin property in the package.json file:

"bin": {
  "juejin-vue-cli": "bin/vue.js"
}
Copy the code

Of course, you can change the name you want, remember to re-create the soft link, first run the NPM unlink command, then run the NPM link command.

How to use NPM link to create your own global “soft link”?

Startup create command

After creating the soft link for the project, we will start to create the first command for the project, which is the vue create packageName command we usually use.

Let’s start by installing dependencies:

npm install commander@2.20. 0
Copy the code

Modify the bin/vue.js file:

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

program
  .command('create <app-name>') // <> Angle brackets are required
  .description('This is a command to initialize the project') // This description will be added to the prompt displayed in junjin-vue-cli -h
  .action((name, cmd) = > { // Name is the project name and CMD is the commander object information
    console.log(name, cmd);
  });

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

Juejin -vue-cli create first-project

As you can see from the figure, when we execute the create command, we are automatically prompted if no project name is entered.

Because we use the Angle bracket (<>) syntax provided by COMMANDER to specify the item name as required, if you want it to be optional, you can use its parenthesis ([]) syntax, which makes it optional.

This completes the initial creation of our create command, and we’ll leave the rest of the logic behind to the next article.

Finally, we add the command to query the version number of the project, and modify the bin/vue.js file:

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

// -v, --version
program
  .version(`juejin-vue-cli The ${require('.. /package').version}`.'-v, --version')
  .usage('Command error, you can enter juejin-vue-cli -h command to view the specific command');

/ / create command
program
  .command('create <app-name>')
  .description('This is a command to initialize the project')
  .action((name, cmd) = > {
     console.log(name, cmd);
  });

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

Then re-run the NPM link command, and then run the juejin-vue-cli -v command:




At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.