实现一个简易的脚手架

192 阅读2分钟

前言

看到各大框架都有着对应的脚手架,所以想着自己去实现一个简单的脚手架,体验一下

创建一个自己的小型脚手架

  • 先创建一个空文件夹,npm init -y生成一个package.json文件
  • 再创建一个lib/cli.js文件,lib是目录(这个随意),cli.js是固定名称(必须)
  • 在package.json添加一行代码"bin": "lib/cli.js"表示脚手架的入口文件
  • 在当前项目目录下执行npm link命令,把自己的脚手架放到全局上(如果脚手架已经发布到npm上,就不用执行这个命令了),然后再执行脚手架的名字,就可以跑起来了。
  • 配置你自己脚手架需要的东西,在cli.js里

文件目录

// cli.js

#!/usr/bin/env node

// 上面这句是固定写法 Node CLI 应用入口文件必须要有这样的文件头
// 如果是Linux 或者 Mac 系统下,还需要修改此文件的读写权限为755,具体命令是 chmod 755 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?'
  },
  {
    type: 'input',
    name: 'author',
    message: 'Project author?'
  },
  {
    type: 'input',
    name: 'version',
    message: 'Project version?'
  }
])
.then(anwsers=>{
  // 提供给开发人员的模板文件的绝对路径
  const templates = path.join(__dirname, '../', 'templates')
  // 获取开发人员新建目录的绝对路径
  const destDir = process.cwd()

  // 将模板下的文件全部转换到目标目录
  fs.readdir(templates, (err, files) => {
    if(err) throw err
    // 循环拿到的所有文件
    files.forEach(file => {
      //解析模板,把对应的数据替换
      ejs.renderFile(path.join(templates, file), anwsers, (err, result) => {
        if (err) throw err
        // 将结果写入目标文件路径
        fs.writeFileSync(path.join(destDir, file), result)
      })

    })
  })
})