background

When a new project is opened at work, there will be many repeated configurations to be added one by one, such as menu permissions, TAB permissions, page permissions, drag and drop, API proxy interceptors, unified styles, customized styles, etc. Therefore, I want to build a scaffold tool to generate templates and build corresponding projects based on templates. At present, the front-end mainly uses VUE and React, so it is divided into two sets of templates. In this way, the preliminary work of a new project will get twice the result with half the effort.

Rely on

"Dependencies" : {" commander ", "^ 3.0.1", / / text output to the terminal of "async" : "^ 2.6.1", "chalk" : "^" against 2.4.1, / / terminal font color "consolidate" : "^ 0.15.1", / / a template engine integrated library "download - git - repo" : "^" 1.0.2, / / now making the template in "handlebars" : "^ 4.0.11", / / template compiler "inquirer" : / / command line answer, "^ 6.0.0" module "metalsmith" : "^ 2.3.0", / / static web sites generated library "ora" : "^ 3.0.0", / / in the terminal in animation display are "request" : "^ 2.87.0", / / request "rimraf" : "^" 2.6.2, / / use the UNIX command rm - rf module "user - home" : "^ 2.0.0" / / get the directory path... }Copy the code

process

  1. Pull template information
  2. Select a template
  3. Check whether a template exists on the local PC. If the template exists on the local PC, determine whether to overwrite it. If the template exists on the local PC, delete the original template and download and generate it
  4. Select the branch to download
  5. Enter the project name and project generation address
  6. End – Start coding

Some code details

Pull the template list

const spinner = ora('fetching template list... ') spinner. Start () the request ({uri: 'http://47.98.120.163:8080/list.json', the timeout: 5000}, (err, response, body)=>{ if(err) { spinner.fail(chalk.red('fetch template list unsuccessfully')) console.log(err) } if(response&&response.statusCode===200){ spinner.succeed(chalk.green('fetch template list successfully')) callback(JSON.parse(body)); }})Copy the code

Download the template

function downloadAndGenerate(tmpRepo,tmpName,tmpUrl){ const spinner=ora('downloading template... ') const tmpDest=path.join(tmpRepo,tmpName) inquirer.prompt([{ type:'input', name:'branch', message:`the name of branch you need in ${tmpName}`, default:'master' }]).then(answer=>{ spinner.start() download(`${tmpUrl}#${answer.branch}`,tmpDest,{ clone:false },(err)=>{ if(err){ spinner.fail(chalk.red('download template unsuccessfully')) console.log(err) }else{ spinner.succeed(chalk.green('download template successfully')) generate(tmpDest) } }) }) }Copy the code

Generate template

const metalsmith=Metalsmith(tmpPath) inquirer.prompt([{ type:'input', name:'name', message:'The name of project', default:'swy-fe' },{ type:'input', name:'destination', message:'The destination of project', Default :process.cwd()}]).then(answer=>{// Project generation path const destination=path.join(transformIntoAbsolutePath(answer.destination),answer.name) const spinner = ora('generating... ').start() // Add a new global variable object.assign (metalsmith.metadata(),answer) spinner.start() metalsmith.source ('.') .destination(destination) .clean(false) .build(function(err) { spinner.stop() if (err) throw err console.log() console.log(chalk.green('Build Successfully')) console.log() console.log((`${chalk.green('Please cd')} ${destination} ${chalk.green('to start your coding')}`)) console.log() }) })Copy the code