• preface
    • Related technology stacks and dependencies
    • Analysis of the
  • Publish NPM packages that support the use of instructions
  • Commander The use of the package
  • Pull code repository to local
  • At the end

preface

Related technology stacks and dependencies

  • javascript
  • Publish the NPM package.
  • Commander The use of the package
  • Use of the download-git-repo package

Analysis of the

Scaffolding VUE-CLI I believe you have used, very convenient.

Install the vue CLI package globally
npm install -g @vue/cli-service-global

Create a project using the vue CLI built-in instructions
vue create hello-world

# Run the project
cd hello-world
npm i
npm run dev
Copy the code

A few instructions to build a front-end project.

The purpose of this article is to teach you how to post personal scaffolding.

The main steps are as follows:

  • Deploy your own NPM package
  • After installing your own deployed packages globally, support the use of our custom directives
  • Configure a front end project and push it to the Git code base
  • According to the command trigger, pull code repository to the local

Publish NPM packages that support the use of instructions

For those of you who have no experience publishing NPM packages, see here: Publishing NPM packages

How do distributed packages support use directives like the following?

vue create hello-world
Copy the code

Step 1: Instruction configuration

Add the following directive configuration to the package.json file of the package

// package.json{..."bin": {
    "wfj-cli": "./index.js"},... }Copy the code

The bin property is used to configure the directive, which consists of key and value. Key is the name of the directive, and vaule is the file to be executed after running the directive.

Step 2: Modify the file to be executed

index.js

#! /usr/bin/env node

console.log('hello world')
Copy the code

You can see the #! Behavior at the top of index.js. The/usr/bin/env node.

This line is used to find the node installation location using the env file in the system and execute the file using Node.

Step 3: Redeploy and install globally

After redeploying the NPM package, the package we deployed needs to be installed globally, as it is necessary to use instructions.

npm i -g packName
Copy the code

Use instruction

# execute the following command to execute node index.js
wfj-cli

# Execution result
hello world
Copy the code

So far, we have successfully released an NPM package that supports the use of simple instructions, which can only execute the corresponding file according to the instructions.

How to handle more complex instructions?

  • As in the Vue CLI, arguments on instructions are received'hello-world'As the name of the folder to create
vue create hello-world
Copy the code

Let’s keep going.

Commander The use of the package

Commander is an NPM package that is a complete Node.js command-line solution.

Using COMMANDER can perfectly solve the problem of receiving command parameters and setting multiple sub-commands.

To get started, check out my overview: Commander Package instructions

For more in-depth study, please go to: Official Instructions

This is just what you need to build scaffolding

Continue with the index.js file above

#! /usr/bin/env node

  const { program } = require('commander')

  // Set the directive version
  program.version('0.0.1')

  program
    // Add instructions
    .command('init')
    // Set command parameters
    .arguments('<filderName>')
    // The description of the directive
    .description('Initialize WFJ - CLI scaffolding')
    // Execute the instruction's callback
    .action((filderName) = > {
      console.log(filderName)
    })

  // Place the end of the line to parse the parameters built by the option method
  program.parse(process.argv)
Copy the code

We use the command method to add the init directive, accept the filderName parameter, and print the filderName parameter in the execute instruction callback function.

Run tests locally

node index.js init hello-world

# Execution result
hello-world
Copy the code

In this case, we can get the hello-world parameter of the directive

Run after redeploying the NPM package and updating the local package

Update local packages
npm update -g packName 

# to perform
wfj-cli init hello-world

# Execution result
hello-world
Copy the code

At this point, our package can receive the parameters on the instruction.

Pull code repository to local

The download-git-repo package can be used to clone the repository locally.

var download = require('download-git-repo');

/** * First parameter :[github/gitlab]:[account name]/[repository name] * second parameter: download path * third parameter: response callback */
download('github:wenfujie/wenfujie.github.io'.'test/tmp'.function (err) {
  console.log(err ? err : 'Success')})Copy the code

The usage is relatively simple, it should be noted that:

  • The first parameter format is[github/gitlab]:[account name]/[repository name] 。
  • The second parameter is the download storage path. We only need to set this value to the command parameter obtained above to achieve the purpose of self-defining the project name.

Continue to modify index.js

#! /usr/bin/env node
// Use env to find node and use node as an interpreter

// The asynchronous mode is converted to the promise form
const { promisify } = require('util')
// Displays the process progress
const ora = require('ora')
const { program } = require('commander')
const downloadGitRepo = require('download-git-repo')
// Clone warehouse
const REPO_DESC = 'github:wenfujie/search-360-bd'

/ / the main entry
function main() {
  const cb = (filderName) = > {
    clone(REPO_DESC, filderName)
  }
  registerCommand(cb)
}

main()

/** * register instruction *@param {function} Callback executes the instruction's callback function */
function registerCommand(callback) {
  program.version('0.0.1')

  program
    .command('init')
    .arguments('<filderName>')
    .description('Description of scaffold initialization')
    .action((filderName) = > {
      typeof callback && callback(filderName)
    })

  program.parse(process.argv)
}

/** * Download git repository code *@param {string} Repo Git repository address *@param {string} The repo download is to be stored in the directory */
async function clone(repo, desc) {
  const down = promisify(downloadGitRepo)
  const downProgress = ora(Download `${repo}In the... `)
  await down(repo, desc)
    .then((res) = > {
      downProgress.succeed('Download successful')
    })
    .catch((err) = > {
      downProgress.failed()
    })
}
Copy the code

This uses the Node tool Promisify, which compiles asynchronous callback methods to support Promise.

Redeploy and update local packages

Update local packages
npm update -g packName 

# to perform
wfj-cli init hello-world

Create a hello-world folder and clone git repositories into it
Copy the code

At this point, we set up a simple scaffold.

At the end

  • We can configure different subcommands, or parameter controls, to download different Git repositories, or to control whether vuex, router, and other modules are initialized.
  • The core concept of scaffolding is reuse, similar to the idea of modular development.
  • Scaffolding is a quick way to set up a development environment when a new project is to be created, rather than copying the project and deleting unnecessary files and modifying redundant code. There will be a lot of repetitive work during development, such as automated deployment, using tools to free up our hands and improve development efficiency.

This article involves relevant knowledge points

The complete code referred to in this article

Release NPM package

Get started with the Commander package

My other articles

Use Node for automated deployment

My front-end knowledge base