Form writing habits together ！ This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 21 God , Click to see the event details .

Custom project template development

stay hzw-cli-dev-template Under this module , New template hzw-cli-dev-template-custom-vue3.

modify package.json , add to main Field

 "main": "index.js"
 Copy code 

add to index.js

function install(options) {
  console.log(options);
}

module.exports = install
 Copy code 

Publish to npm

Add a new piece of data to the database

Custom template installation logic development

commands\init\lib\index.jsinstallCustomTemplate

  /** * @description:  Install custom templates  * @param {*} * @return {*} */
  async installCustomTemplate() {
    //  Query the entry file of user-defined template 
    if (await this.templateNpm.exists()) {
      const rootFile = this.templateNpm.getRootFilePath();
      if (fs.existsSync(rootFile)) {
        // Start executing custom template 
        const templatePath = path.resolve(this.templateNpm.cacheFilePath, 'template')
        const options = {
          templateInfo: this.templateInfo,
          projectInfo: this.projectInfo,
          targetPath: process.cwd(),
          sourcePath: templatePath
        }
        const code = `require("${rootFile}")(${JSON.stringify(options)})`
        await execAsync('node', ['-e', code], { stdio: 'inherit', cwd: process.cwd() })
        //  Custom template installed successfully 
      }
    }
  }
 Copy code 

hzw-cli-dev-template-custom-vue3\index.js

const fse = require("fse")
const inquirer = require('inquirer')
const glob = require('glob')
const ejs = require('ejs')


/** * @description: ejs  Template rendering  * @param {*} * @return {*} */
async function ejsRender(options) {
  return new Promise((resolve, reject) => {
    //  Traverse the list of files 
    glob("**", {
      cwd: options.targetPath,
      nodir: true,
      ignore: options.ignore || []
    }, (err, files) => {
      if (err) {
        reject(err)
      }
      //  Use... For the file list  ejs  Rendering 
      Promise.all(files.map((file) => {
        const filePath = path.join(process.cwd(), file)
        return new Promise((resolve1, reject1) => {
          ejs.renderFile(filePath, options, {}, (err, res) => {
            if (err) {
              reject1(err)
            }
            //  Replace the source file with  ejs  Rendered file 
            fse.writeFileSync(filePath, res)
            resolve1(res)
          })
        })
      }))
        .then(() => resolve(files))
        .catch((err) => reject(err))
    })
  })
}


async function install(options) {
  const promptArr = []
  const descriptPrompt = {
    type: 'input',
    message: ' Please enter the component description ',
    name: 'description',
    validate: (a) => {
      if (a) {
        return true;
      }
      return ' Component description cannot be empty ';
    },
  }
  promptArr.push(descriptPrompt)
  const answer = await inquirer.prompt(promptArr);
  options.description = answer.description
  //  Get the template cache path 
  //  Get the directory where the template is located   Get current directory 
  const { sourcePath, targetPath } = options
  try {
    //  Make sure the directory exists   Does not exist, will create 
    fse.ensureDirSync(sourcePath);
    fse.ensureDirSync(targetPath);
    //  Copy the template to the current directory 
    fse.copySync(templatePath, targetPath)
    // ejs  Template rendering 
    options.ignore = ['node_modules/**', ...options.templateInfo.ignore]
    // const ops = { ignore }
    await ejsRender(options)
    // const { installCommand, startCommand } = this.templateInfo
    //  Dependent installation 
    // await this.execCommand(installCommand, ' Dependency installation succeeded ')
    //  Start command 
    // await this.execCommand(startCommand, ' The project started successfully ')
  } catch (error) {
    log.error(error.message)
  } finally {
    spinner.stop(true)
    log.warn(' Template installed successfully ')
  }
}

module.exports = install
 Copy code 

Summary of the first stage

This concludes the first phase of the course . The main content is to develop the function of scaffold creation project , Scaffolding has other functions , I will continue to add in later courses .

Due to their own ability , The first stage of the course plus meals , That is to say nodejs Related source code analysis , I haven't seen it completely , So after this place has the opportunity or ability , I need to add .

• The fourth chapter of the second week
• Chapter five and chapter seven of the fourth week
• The seventh chapter of the fifth week
• Chapter 7 and Chapter 8 of week 6

In this stage, three code warehouses are generated

• hzw-cli-dev： Scaffold core code
• hzw-cli-dev-server： Scaffold service end
• hzw-cli-dev-template： The warehouse where the project template is stored

Produce a total of twenty stage notes （ Including this chapter ） I want to be an architect

This shows 17 Because there are three articles that haven't been published yet .

To tell you the truth, I can't see it in the back , But I still insist on reading it , While watching the video , While typing code , While taking notes , It's a little slow .

And here we are B End developed , Get in touch with some new technology stacks , I hope I can improve my interest , And speed up .

Or that sentence ： I wish I can grow into a qualified architect as soon as possible ~