Directory –

  1. The scaffold
  2. Global command
  3. Interactive input
  4. Pull the remote repository code
  5. To optimize the
  6. conclusion

1. Scaffolding

Today the bricks at the site were a little hot. I looked up at the sky and thought for half a minute. I decided to put up a scaffold for the convenience of moving bricks later:

Sorry, I took the wrong one. Here it is:

Many of you have used scaffolding like vue-cli, create-react-app, or angular-cli, where you can quickly put together a project framework with a single command line. Instead of slash-and-burn copy-and-paste, you can free up productivity in minutes.

As an aspirant cutter, this is a wonderful tool to touch fish, which must be arranged immediately.

OK, so the question is: what is scaffolding?

From the perspective of the form of expression, scaffolding mainly has the following characteristics:

  1. A command that can be executed globally;
  2. Can achieve interactive input, such as input project name, select configuration items, etc.
  3. Can automatically pull code from GitHub or GitLab remote repositories.

Of course, there’s more to advanced scaffolding than that, but let’s start with the simplest implementation.

2. Global commands

2.1 Basic principles

Unpack first to see how a global command like vue-cli is implemented. C:\Users\ Username \AppData\Roaming\ NPM :\ Roaming\ NPM :\ Roaming\ NPM :\ Roaming\ NPM:

You can see that there are a number of files with the same name as the global command in this directory, as well as a node_modules folder. Our global installation dependency packages are in node_modules. Go to @vue\cli. This is the source package for vue-cli.

The package.json in the Vue-CLI source package has this key configuration:

  "bin": {
    "vue": "bin/vue.js"
  },

The bin/vue.js script must begin with #! /usr/bin/env = /usr/bin/env

When NPM is installed globally, the corresponding executable file with the same name is generated based on this configuration.

When we run Vue, the system runs Vue.js as a Node program.

The NPM link command is provided in the NPM documentation to allow users to generate a global command for their custom scaffolding.

NPM link does two main steps:

  • One is to create a link file in the node_modules folder under the NPM global installation path. This link file points to the folder where the command is executed, which is our scaffold source folder.
  • The second is to generate an executable file with the same name as the configuration bin under the NPM global installation path.

So, with NPM link, we can generate a Node global command.

NPM link the official document: https://docs.npmjs.com/cli/v6… .

2.2 Implementation of global command

Without further ado, let’s first roll out a global command.

1) Execute NPM init to initialize package.json:

2) Add bin configuration to package.json:

  "bin": {
    "test-cli": "./test.js"
  },

3) Add the corresponding execution script file test.js:

#! /usr/bin/env node console.log("Hello! My CLI!" );

4) Execute the NPM link in a package.json equivalent directory

5) Run the global command test-cli from the console and see the output:

Done!

3. Interactive input

By doing this, the user is able to execute the global command to our test.js file, and the rest of the functionality can be used freely in js.

The Node community has a large number of third-party modules that allow you to quickly develop and implement the functionality you want.

One of them is Inquirier, currently available on GitHub as a 14.5K Star, which aims to “be an easy to embed and beautiful command-line tool.” As the name implies, with the Inquirier module, we can interact with the user’s input from the command line.

We need to know what the name of the project the user is creating and which remote repository code the user wants to download:

const inquirer = require("inquirer"); Inquirer. Prompt ([{type: "input", name: "project", message: "project",}, {type: "list", name: "TPL ", message: "project",}, "Please select a template," choices: [" vue "and" react "],}]). Then ((res) = > {the console. The log (res); const { project, tpl } = res; // TPL is the template selected by the user});

This code provides the user with an input option to enter the project name and a list option to select the template to download (we then download the template from the corresponding repository address based on the template name).

Inquirer and even more options function, interested friends can go to the official documentation on free inquiry: https://github.com/SBoudrias/… .

4. Pull the remote warehouse code

Now we know which template code the user is trying to download and where the template code should be downloaded:

const stores = [
    {
        name: "vue",
        url: "https://github.com/vuejs/vue.git"
    },
    {
        name: "react",
        url: "https://github.com/facebook/react.git"
    }
]

There are also several third-party modules that pull GitHub or GitLab remote repository code. I chose NodeGit, which currently has a 4.9K star on GitHub and is very easy to use:

const Git = require("nodegit"); /** clone remote repository code */ // url: source repository address; Path: the destination path to download; CB: callback function const GitClone = (url, path, CB)=>{console.log(" Downloading remote repository code...") ) console.log(url) Git.Clone(url, Then (function(res) {console.log(" Download completed ") cb(true)}). Catch (function(err) {console.log(" Download failed "+err); cb(false) }); }

Nodegit website address: https://github.com/nodegit/no…

So far the three basic functions have been achieved!

5, to optimize

I think I can go further, such as download the source code, and then help me automatically install the dependent package:

const process = require('child_process'); /** Install dependencies */ const install = (path)=>{// Path is the path of package.json in the source template console.log(" Installs dependencies...") ) const cmd = 'cd '+path+' && yarn'; process.exec(cmd, function(error, stdout, stderr) { console.log(error); console.log(stdout); console.log(stderr); Console. log(" Installation complete ")}); }

Before I saw a lot of scaffolding came out of the art word, as a pursuit of the cutting picture zai, this must be arranged! This is used by a third-party modules figlet (https://github.com/patorjk/fi)… :

const figlet = require('figlet'); figlet('My CLI! ', {horizontalLayout:"full"}, function(err, data) { if (err) { console.log('Something went wrong... '); console.dir(err); return; } console.log(data) // do something... });

A lot of scaffolding also provides functions such as parameter configuration, help information, this is mostly achieved by commander module (https://github.com/tj/command… , 20.7K Star), here will not be expanded in detail, I in the demo project is also a simple implementation of the next, really very powerful and easy to use.

The Demo has open source: https://github.com/youzouzou/… .

This demo simply implements the basic functions of the scaffold, explores the use of several Node modules, and has a lot to optimize. The best way to learn further is to look at the mature scaffolding source code, and then to imitate and practice, and then combined with the actual situation, to find the best solution for your team.

6, summary

If a worker would do his work well, he must sharpen his tools.

In fact, scaffolding is not restricted to the above form of implementation, all the tools to improve efficiency, in a sense can be called scaffolding.

Imitation is only the initial stage, innovation is the real beginning.