I’m a little interested in scaffolding myself, so I did some research on it, and I’m still writing lerna articles. Give me a thumbs up if you like

Node Scaffolding principle

Take vue-CLI as an example

vue --help
Copy the code

How does the system recognize the variable vue from which vue

which vue
/c/Users/Administrator/AppData/Roaming/npm/vue
Copy the code

NPM i-g [pageages] install vue. CMD file in NPM i-g [pageages]

@IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "%~dp0\node_modules\@vue\cli\bin\vue.js" %* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:; .JS; =; % node "%~dp0\node_modules\@vue\cli\bin\vue.js" %* )Copy the code

It’s not clear, but we can probably guess that \node_modules\ @vue.cli \bin\vue.js is the command parsing file we run

Go to the \node_modules\@vue\cli\bin directory

node ./vue.js --help
Copy the code

We will find that it is as reasonable to infer as vue –help that the system executed the above command through vue.cmd

The key is why the system can find the VUE directly without adding the node prefix; Open the vue.js file

#! /usr/bin/env node ....Copy the code

#! /usr/bin/env node is the key. This line will help us to find the system variable node directly, thus suddenly prefix

NPM package (scaffold package)

After registering an account on NPM official website and running the NPM login command to login, we can create a new folder and enter the folder

npm init
Copy the code

Json by specifying the main field in package.json in case we can publish the library

But we want to publish packages that can be parsed with vue commands like vue-CLI, so we want to add

Add the bin field of package.json to specify the file we want to run

# package.json file... "bin": { "vue-test": "bin/index.js" }, ...Copy the code

Say we want to print Hello World with vue-test!!

$ vue-test
hello world!!
Copy the code

The bin field is specified

# bin/index.js file #! /usr/bin/env node console.log("hello world!!" )Copy the code

Now we want to test whether this command works

  • Local test

Link can test local packages NPM link 

npm link
$ vue-test
Copy the code

This command creates global directives for you locally

  • Remote create
NPM publish NPM I -g <package-name> $vue-testCopy the code