概述脚手架实现的过程,并使用 NodeJS 完成一个自定义的小型脚手架工具

概述脚手架实现的过程,并使用 NodeJS 完成一个自定义的小型脚手架工具
脚手架就是创建项目基础接口提供项目规范和约定的工具。快速生成项目,创建项目基础结构,几乎代码,在创建项目环节大大提高我们的效率,更加利于代码维护与团队开发。

实现过程:

  1. 创建目录 sample-scaffolding

  2. 初始化项目 npm init

  3. package.json 中添加bin字段,指定cli文件的入口文件: ‘bin’: ‘./cli.js’(node js cli 的入口文件是通过pageage.json 里面的bin字段指定的)。

  4. 安装所需要的依赖
    npm install inquirer --save (询问交互)
    npm install ejs --save (高效的嵌入式 JavaScript 模板引擎)

  5. 创建cli.js 文件
    在文件中添加 #!/usr/bin/env node
    // 在Node Cli 应用入口文件必须要有上边的文件头
    // 如果系统是linux 或者 macOS 还需要修改此文件的读写权限改成755
    // 具体就是通过 chomd 755 cli.js 实现修改。
    1). cd 你的文件夹路径的上一级目录。
    2). sudo chmod -R 777 你的文件夹名。
    或者 sudo chmod -R 755 你的文件夹名。
    3). 输入密码。
    4). success
    终端打印信息 usage: chmod [-fhv] [-R [-H | -L | -P]] [-a | +a | =a [i][# [ n]]] mode|entry file …
    chmod [-fhv] [-R [-H | -L | -P]] [-E | -C | -N | -i | -I] file …

  6. 在vscode 终端执行
    yarn link (把这个模块link到全局)
    sample-scaffolding (验证基础是否成功)

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

  8. 验证
    cd … // 返回
    mkdir demo // 创建demo目录
    cd demo // 进入
    sample-scaffolding // 执行

#!/usr/bin/env node

// fs模块用于对系统文件及目录进行读写操作
const fs = require('fs')
// 用于处理文件路径的小工具
const path = require('path')
// 载入inquirer模块询问用户
const inquirer = require('inquirer')
// ejs 模板引擎
const ejs = require('ejs')

inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: 'Project name?'
    }
]).then(anwsers => {
    console.log(anwsers)
    // 根据用户回答的结果生成文件
    // 明确模板目录
    const temDir = path.join(__dirname, 'templates')
    // 明确目标目录
    // The process.cwd() method returns the current working directory of the Node.js process
    const destDir = process.cwd()
    // 将模板下的文件全部转换到目标目录
    fs.readdir(temDir, (err, files) => {
        if(err) throw err
        files.forEach(file => {
            // file 每个文件的相对路径
            // 通过模板引擎渲染文件
            ejs.renderFile(path.join(temDir, file), anwsers, (err, result) => {
                if(err) throw err
                console.log(result, 'result')
                // 将结果写入目标目录
                fs.writeFileSync(path.join(destDir, file), result)
            })
        })
    })
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值