脚手架的工作原理--开发一个小型的脚手架工具

大部分的工作原理都比较简单,一般都会询问你一些预设的问题,然后把你回答的结果结合一些模板文件生成一个项目的结构
下面是通过nodejs开发一个小型的脚手架工具
脚手架工具就是Node-cli应用
先初始化一个应用
在这里插入图片描述
然后在package.json里添加个bin
在这里插入图片描述
然后创建这个cli.js文件
cli的文件必须有一个特定的文件头

#!/usr/bin/env node

在这里插入图片描述
简单的在里面写一个log,然后通过yarn link的方式link到全局,然后通过sample-scaffolding命令可以打印出来,就说明这个cli应用的基础是成功的。
在这里插入图片描述
脚手架的工作过程:

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

在node中发起命令行交互询问使用inquirer

yarn add inquirer
const inquire = require('inquirer')

inquirer.prompt([
    {
        type:'input',
        name:'name',
        message:'Project name?'
    }
]).then(anwsers = {
    console.log(anwsers)
})

在这里插入图片描述
新建一个index.html文件做成模板,在title里<%= name %>
在这里插入图片描述
需要安装ejs模板引擎

yarn add inquirer
#!/usr/bin/env node

// Node CLI 应用入口文件必须要有这样的文件头
// 如果是 Linux 或者 macOS 系统下还学要修改此文件的读写权限
// 具体就是通过 chmod 755 cli.js 实现修改

// console.log('cli working')

// 脚手架的工作过程:
// 1. 通过命令行交互询问用户问题
// 2. 根据用户回答的结果生成文件

// 使用 inquirer 在 node 中和用户进行命令行交互
// yarn add inquirer

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

inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: 'Project Name?'
    }
]).then(answers => {
    // console.log(answers)
    // 根据用户的回答结果解和模板生成文件

    // 模板的目录
    const tmpDir = path.join(__dirname, 'templates')
    // 目标目录
    const destDir = process.cwd()
    // console.log(process.cwd()) // D:\workPlatform\demos\sample-scaffolding

    // 将模板下的文件全部转换到目标目录
    fs.readdir(tmpDir, (err, files) => {
        if(err) throw err
        files.forEach(file => {
            // 通过模板引擎去渲染这些文件
            ejs.renderFile(path.join(tmpDir, file), answers, (err, result) => {
                if(err) throw err
                // console.log(result)

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

在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值