This is the 26th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Scaffolding for front-end Architect Skills (Part 2)

Scaffolding development process

  • createnpmproject
  • Create scaffold entry file and add it at the top
#! /usr/bin/env node
Copy the code
  • configurationpackage.jsonaddbinattribute
  • Writing scaffolding code
  • Publish scaffolding tonpm

Scaffolding use procedure

  • Erection of scaffolding
$ npm install -g your-own-cli
Copy the code
  • Use scaffolding
$ your-own-cli
Copy the code

☆ Analysis of development difficulties

  • Subcontracting: The division of a complex system into modules
  • Command registration:
vue create
vue add
vue invoke
Copy the code
  • Argument parsing
vue command [options] <params>
Copy the code

  • Options: –version, –help

  • Options: -v -h

  • Options with params –path /User/ DMW /Desktop/ VUe-test

  • Help document

    • global help
      • Usage
      • Options
      • Commands

Example: Vue help information

$ vue --help
Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin inan already created project inspect [options] [paths...]  inspect the webpack configin a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.
Command Create option
$ vue create --help
Usage: create [options] <app-name>

create a new project powered by vue-cli-service

Options:
  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
  -g, --git [message]             Force git initialization with initial commit message
  -n, --no-git                    Skip git initialization
  -f, --force                     Overwrite target directory if it exists
  --merge                         Merge target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy <proxyUrl>          Use specified proxy when creating project
  -b, --bare                      Scaffold project without beginner instructions
  --skipGetStarted                Skip displaying "Get started" instructions
  -h, --help                      output usage information

How to set up the Chinese help document?
Copy the code
  • Command line interaction
  • Log print
  • Command line text changes color
  • Network communication: HTTP/Websocket
  • File processing
  • .

Quick access to the first scaffolding

$ mkdir colion-test-cl
$ cd colion-test-cl
$ npm init -y Initialize the project
$ mkdir bin && cd bin && touch index.js
Copy the code

The editor/bin/index.js

#! /usr/bin/env node
console.log('welcome colion-test')
Copy the code

The editorpackage.json

{
  "name": "colion-test-cli"."version": "1.0.0"."description": ""."bin": {"colion-test": "bin/index.js"
  },
  "main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": []."author": ""."license": "ISC"
}

Copy the code

releaseNPM

$ npm login # login
$ npm publish # release
Copy the code

Use my first scaffoldingcolion-test

$ sudo npm install colion-test-cli -g
$ colion-test
welcome colion-test
Copy the code
$ which colion-test
/usr/local/bin/colion-test $ ls -l lrwxr-xr-x 1 root admin 48 11 21 23:10 colion-test -> .. /lib/node_modules/colion-test-cli/bin/index.jsCopy the code

Scaffolding local debugging method

npm link

Remove local debug scaffolding

npm unlink

If that doesn’t work, use the following command

sudo npm rm --global <module_name>

The subcontract

Colion -test-cli Creates a project colion-test-lib in parallel

$ cd. $ mkdir colion-test-lib &&cd colion-test-lib
$ npm init -y
$ mkdir lib && cd lib  && touch index.js
# package.json specifies main
# "main": "lib/index.js",
$ vim index.js
Copy the code
// index.js
module.exports = {
  sum(a, b) {
    returna + b; }};Copy the code

How does the colion test-cli reference the colion test-lib package?

$ npm link
$ cd ../colion-test-cli
$ npm link colion-test-lib
$ vim package.json
# add dependencies
"dependencies": {
	"colion-test-lib": "1.0.0"
}
Copy the code

Edit colion – test – cli/bin/index, js

Using colion – test – lib

#! /usr/bin/env node
const lib = require('colion-test-lib');
console.log(lib);
console.log('welcome colion-test! ');
Copy the code
$ colion-test
{ sum: [Function: sum] }
welcome colion-test!
# debug successfully
Copy the code

Summary of standard procedures for local commissioning of scaffolding

Link to local scaffolding:

$ cd your-cli-dir
$ npm link
Copy the code

Link local library files:

$ cd your-lib-dir
$ npm link
$ cd your-cli-dir
$ npm link your-lib
Copy the code

Unlink the local library file

$ cd your-lib-dir
$ npm unlink
$ cd your-cli-dir
$ npm unlink your-lib
Copy the code

Understand the NPM link:

  • npm link your-lib: Add the current projectnode_modulesUnder the specified library file link tonodeglobalnode_modulesUnder the library file
  • npm link: links the current project tonodeglobalnode_modulesAs a library file, and parsebinConfigure to create executable files

Understand the NPM unlink

NPM unlink removes the current item from node global node_modules

NPM unlink your-lib removes library file dependencies from the current project

Analysis of scaffolding command registration and parameter resolution

colion-test-lib/lib/index.js

module.exports = {
  init() {
    console.log('Execute init process')}};Copy the code

colion-test-cli/bin/index.js

#! /usr/bin/env node
// Register a command colion-test init
// require('process'). Argv can list all arguments as an array
const lib = require('colion-test-lib');
const argv = require('process').argv;
const command = argv[2]; // Get the third argument as our command
const options = argv.slice(3);
if (options.length > 1) {
  let [option, param] = options;
  option = option.replace(The '-'.' ');
  if (command) {
    if (lib[command]) {
      lib[command]({ option, param });
    } else {
      console.log('Invalid command'); }}else {
    console.log('Please enter command'); }}// implement parameter parsing --version and init --name
if (command.startsWith(The '-') || command.startsWith(The '-')) {
  const globalOption = command.replace(/--|-/g.' ');
  if (globalOption === 'version' || globalOption === 'V') {
    console.log('1.0.0'); }}Copy the code

Published online

$ cd colion-test-lib
$ npm unlink
# Upgrade version number
$ npm publish

$ cd colion-test-cli
$ npm unlink
$ rm -rf node_modules/
$ npm unlink
$ npm unlink colion-test-lib
$ npm install colion-test-lib -s
# Upgrade version number
$ npm publish
Copy the code