脚手架工作原理

1. 初始化package.json文件

2. 在文件中添加 “bin”字段

   {
     "name": "sample",
     "version": "0.1.0",
     "main": "index.js",
     "bin": "cli.js", // 脚手架入口文件
     "license": "MIT",
   }
   

3. cli.js

   #!/usr/bin/env node
   /*
     Node CLI 应用入口文件必须要有这样的文件头
     如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
       chmod 755 cli.js
   */
   console.log('cli working!')
   

4. yarn link到全局，执行

   yarn link
   run

---

示例

项目结构

#!/usr/bin/env node

/*
  cli.js
  1. 通过命令行交互询问用户问题
  2. 根据用户回答的结果生成文件
*/

const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')

inquirer.prompt([ // 发起命令行询问
  {
    type: 'input',
    name: 'name',
    message: 'Project name?'
  }
])
.then(anwsers => {
  // console.log(anwsers) => { name: 'demo' }
  // 根据用户回答的结果生成文件

  // 模板目录
  const tmplDir = path.join(__dirname, 'templates')
  // 目标目录
  const destDir = process.cwd();

  // 将模板下的文件全部转换到目标目录
  fs.readdir(tmplDir, (err, files) => {
    if (err) throw err
    files.forEach(file => {
      // console.log(file); => index.html  style.css 相对于模板目录下的相对路径
                                          
      // 通过模板引擎渲染文件
      ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
        if (err) throw err

        // 将结果写入目标文件路径
        fs.writeFileSync(path.join(destDir, file), result)
      })
    })
  })
})

yarn link到全局，执行

link

初始template-index.html

编译后的项目结构

编译后的index.html