background

Scaffolding is so important in the field of front-end engineering that each company (or team) maintains its own scaffold for its own business characteristics. Specifically, its importance is reflected in the following aspects:

  • Unified development process (project initialization, startup, packaging, deployment can all be wrapped up inside the scaffolding, business people can only focus on the business);
  • Works well with other infrastructure capabilities such as code detection, mocks, etc. Can be at the scaffold level docking;

In this case, as a front end person, you need to understand how scaffolding works and its basic implementation. Next we build a simple scaffolding step by step from scratch.

Project structures,

Initialize the project

Mkdir simple-cli CD simple-cli mkdir cli // Directory where CLI source code is stored mkdir demo // Directory where demo is storedCopy the code

Go to the CLI directory (subsequent operations are performed in the CLI directory by default).

Plain and simple, just do NPM init. You can get an item with a hit. But there is only one package.json file.

Create index.js at the same level

#! /usr/bin/env node
// This line above is important, specifying the development environment as Node
console.log('---index.js-----')
Copy the code

Global link configuration

Add configuration to package.json file:

{
  "bin": {
    "simple-cli": "index.js"}}Copy the code

The bin configuration is important to indicate the location of the corresponding executable file. After future users install our scaffolding globally through NPM, they can execute simple-CLI commands. More on package.json configuration can be read here.

But the package is still under development, so of course installation is impossible. Another instruction, NPM link, is available. Console go to the current directory and execute:

npm link
Copy the code

At this point, NPM will link the bin instruction globally (it can be disconnected by NPM unlink in the future).

At this point in the console:

simple-cli    / / output - index. The js -- -- -- -- --
Copy the code

Babel configuration

The scaffolding execution environment is Node. Node is CommonJs compliant. In order to execute ES6 code, we need to escape our code. Continue to add the following configuration to package.json:

  "scripts": {
    "dev": "npx babel src --watch --out-dir lib"
  }
Copy the code

Babel escapes SRC files and prints them to lib. Watch listens to SRC and recompiles code when it changes.

Cli /. Babelrc:

{
  "presets": [
    "@babel/preset-env"]}Copy the code

Console execution:

npm install @babel/cli --save-dev
npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm run dev
Copy the code

Create a new file SRC /index.js and write:

console.log('src/index.js')
Copy the code

A new file, lib/index.js, is automatically created. The content is the escaped code of SRC /index.js.

Modify the cli/index.js file as follows:

#! /usr/bin/env node
// This line above is important, specifying the development environment as Node
require('./lib/index')
Copy the code

And then the console says

simple-cli    / / output 'SRC/index. Js'
Copy the code

Here you get the following directory:

. ├ ─ ─ cli │ ├ ─ ─ index. The js │ ├ ─ ─ lib │ │ └ ─ ─ index. The js │ ├ ─ ─ package. The json │ ├ ─ ─ the babelrc │ └ ─ ─ the SRC │ └ ─ ─ index. The js └ ─ ─ the demoCopy the code

The basic configuration of our project has been completed. Then develop specific functionality in the SRC directory.

Define basic instructions

For a scaffold tool, there should be the following basic instructions:

simple-cli start  
simple-cli build
simple-cli publish
Copy the code

This definition is implemented with the help of Commander. First NPM install commander –save-dev. Modify the SRC /index.js file:


import { program } from 'commander'
const pkg = require('.. /package.json')

// Define the -v/ --version directive
program.version('Current version:${pkg.version}`.'-v, --version'.'get current version')

// customize the command start
program
    .command('start')
    .description('start a program')
    .action(() = > {
        // todo
        console.log('command start ')})// Build a custom directive
program
    .command('build')
    .description('build program')
    .action(() = > {
        // todo
        console.log('command build')})// Customize the command publish
program
    .command('publish')
    .description('publish program')
    .action(() = > {
        // todo
        console.log('command publish')
    })

program.parse(process.argv)

Copy the code

Run simple-cli help on the console to get the following output:

Options:
  -v, --version   get current version
  -h, --help      display help for command

Commands:
  start           start a program
  build           build program
  publish         publish program
  help [command]  display help for command
Copy the code

Only its definition is done here, and the concrete implementation of each instruction will be implemented later.

To be continued

Start from scratch a front-end scaffolding (two) start from scratch a front-end scaffolding (three) start from scratch a front-end scaffolding (four)

Refer to the article

  • Javascript.ruanyifeng.com/nodejs/pack…
  • Github.com/tj/commande…