wedge

Front-end engineering is becoming increasingly popular, and scaffolding has become an essential part of our daily development, such as VUe-CLI, react-creation-app, and so on.

Using scaffolding, we can easily simplify our development process and effectively improve our r&d energy efficiency

For example, when we need to build a project from scratch, we first need to create a directory, create the corresponding initialization files in the directory, and configure the module packers such as Webpack, gulp, rollup, which often takes us a day or even several days. Scaffolding, however, can create a project template for you in just a few minutes by simply typing a single line of command on the command line, greatly saving us time costs.

I believe that most of the students of scaffolding understanding only stay in the use of the above, today we will understand the principle of scaffolding.

Note: This article was developed using Node.js for scaffolding

The role of scaffolding

You can think about the role of scaffolding is what? What is the core goal of scaffolding development?

Yes, it is to improve research and development efficiency!

The core value of scaffolding

  1. Automation:Project duplication, code copy, Git operation, release online operation
  2. Standardization:Project creation, Git flow, release process, rollback process
  3. Digital:The research and development process is systematized and datalized so that the research and development process can be quantified

And automated build tools

Some students may ask why they need to develop scaffolding when Jenkins, Travis and other automated build tools are already available and mature.

  1. Unmet needs:Jenkins, TravisUsually in thegit hooksTo trigger, need to be executed on the server, cannot cover the r & D personnel local functions, such as: create project automation, localgitOperation automation, etc.
  2. Customization complexity:Jenkins, TravisThe customization process requires the development of plug-ins, which are complex and need to be usedjavaLanguage, not friendly to front-end development

The nature of scaffolding

Scaffolding is essentially an operating system client.

It is executed on the command line, for example:

vue create vue-project
Copy the code

The execution principle of scaffolding

Why can we execute vue create vue-project on the command line?

The user enters a command on the clivue create vue-projectThe operating system first looks up global environment variablesvueThis environment variable will be executed if it is found, and an error will be reported if it is not found, as shown in the following figure:

The implementation principle of scaffolding

After installing a scaffold globally via NPM such as @vue/cli, the bin configuration in the package.json file will be parsed, and then a soft connection will be created in the bin directory in the Node installation directory and attached to the package. The name of the soft link is the key configured by bin, and the connected file is the value configured by bin. The value points to the file that needs to be set #! The /usr/bin/env node identifies the file execution method

Implement one of the simplest scaffolding

Step 1: We need to create a folder called test-cli; Step 2: On the command line, go to the test-CLI folder and run NPM init to initialize the project. Step 3: Modify the package.json file by adding the following configuration items:

{... "bin": { "test-cli": "./bin/index.js" }, ... }Copy the code

Step 4: Create a bin folder in test-cli and create an index.js file. Open the index.js file and write #! /usr/bin/env node; Step 5: You can write something like console.log(‘ XXX ‘) funny face; Step 6: On the command line, go to the test-CLI folder and run NPM link. Step 7: On the command line, type test-cli and press Enter. You will see XXX printed on the command line.

This is one of the simplest scaffolding, if you want to do better, such as some common scaffolding commands, you can learn about yargs, commander plugin, here is a commander command based on the code. Test -cli –help:

#! /usr/bin/env node const commander = require('commander') const pkg = require('.. Json ') // get a commander singleton // const {program} = commander // Manually instantiate a Commander instance const program = new commander.Command() program .name(Object.keys(pkg.bin)[0]) .usage('<command> [options]') .version(pkg.version) Option (' - d - debug, whether to open the debug mode, false). Option (' - e - env < envName > ', 'access environment variable name, False) // addCommand Register subcommand const service = new commander.Com command(' service') service. command('start [port]') .description('start service at some port') .action((prot, cmdObj) => { console.log('do server start', prot) }) service .command('stop') .description('stop service') .action(() => { console.log('do server stop') }) program.addCommand(service) program.on('option:debug', () => { console.log('debug') }) program.on('command:*', (obj) => {console.log(' unknown command ', Obj) const availableCommands = program.available.map (CMD => cmd.name()) console.log(' availableCommands ', availableCommands) }) program .parse(process.argv) // console.log(program.debug) // console.log(program.env) // console.log(program.opts())Copy the code

conclusion

The development of scaffolding is extensive and profound, and it opens the door to a new world for me, while also giving me a deeper understanding of Node.js. It is also a direction to break through the bottleneck of existing technology and a skill that must be mastered as a senior front-end development engineer.