手把手带你使用node实现搭建小型脚手架

原创
2020/12/04 09:58
阅读数 5.1K

脚手架的基础

首先需要新建一个package.json文件,并在配置里添加"bin"属性,"bin"的值为文件路径。

PS:如果你想自定义CLI启动的名字,可以给bin一个对象,键值就是你启动输入的名字,不过你开发项目的时候要注意不要跟其他的CLI名称重复了。不自定义名称的话,就是输入项目的名称即可。本次演示我就不取自定义名称了,想自定义名称的小伙伴记得启动项目时,需要用自定义的名称(如下图)。

CLI应用的入口文件必须要有 #!/usr/bin/env node 作为文件头,如果使用的是Linux和macOS系统的话,还需要将此文件的读写权限改为755。

接着我们通过yarn link的方式将此模块link到全局 ,来看看这个项目的能不能跑起来。

可以看到打出了log的信息,就代表项目正常执行了,脚手架的基础已经建好了。

PS:这里如果执行不了,可能是环境变量配置有问题,你可以用'yarn global bin'去查看你的yarn全局Bin的地址,并加到环境变量中就可以了。

脚手架的工作过程

接下来,我们来编写脚手架的工作过程,其过程分为两点:1.通过命令行交互询问用户问题;2.根据用户回答的结果生成文件。

通过命令行交互询问用户问题

在node里想使用命令行对用户发起询问,需要使用‘inquirer’这个模块,所以需要先安装这个模块,可以用yarn add来加载。

yarn add inquirer

安装好后,将quirer引入cli,inquirer有个prompt方法,可以通过传递相关配置,用这个方法来对用户进行询问,询问完后,通过‘.then’来获得用户的输入值。

#!/usr/bin/env node

// console.log('cli working')

const inquirer = require('inquirer');

inquirer.prompt([
    {
        type: 'input',  //指定问题的输入方式
        name: 'name',   //指定问题返回值的键名
        message: 'Project name?'  //给用户的提示
    }
]).then( answer => {
    console.log(answer);
});

我们回到控制台看看能否进行询问并返回。

我们可以看到询问和返回都是没有问题的,我们的询问这一步就完成了

根据用户回答的结果生成文件

现在我们需要根据回答生成文件,生成的文件需要模板,所以我们要先建立模板文件,模板文件可以使用<%= name %>来填入刚才回答的问题,如果你刚刚在prompt中name的value值用的是别的,这里就把name换成你自己写的value值即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= name %></title>
</head>
<body>

</body>
</html>

在生成模板文件之前,我们一般先要把模板的根目录和目标路径给确定下来

#!/usr/bin/env node

// console.log('cli working')

const inquirer = require('inquirer');
const path = require('path');

inquirer.prompt([
    {
        type: 'input',  //指定问题的输入方式
        name: 'name',   //指定问题返回值的键名
        message: 'Project name?'  //给用户的提示
    }
]).then( answer => {
    // console.log(answer);
    // 模板目录
    const tmplDir = path.join(__dirname, '../temp')
    // 目标目录
    const destDir = process.cwd()
});

在确定了路径之后,我们再通过fs去读取模板目录下的目标文件,再将读取到的文件通过模板引擎渲染文件并转化到目标路径,这里需要通过'yarn add ejs'下载模板引擎。

#!/usr/bin/env node

// console.log('cli working')

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

inquirer.prompt([
    {
        type: 'input',  //指定问题的输入方式
        name: 'name',   //指定问题返回值的键名
        message: 'Project name?'  //给用户的提示
    }
]).then( answer => {
    // console.log(answer);
    // 模板目录
    const tmplDir = path.join(__dirname, '../temp')
    // 目标目录
    const destDir = process.cwd()
    // 将模板下的文件全部转换到目标目录
    fs.readdir(tmplDir, (err, files) => {
        if (err) throw err
        files.forEach(file => {
            // 通过模板引擎渲染文件
            ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {
                if (err) throw err
                // 将结果写入目标文件路径
                fs.writeFileSync(path.join(destDir, file), result)
            })
        })
    })
});

完成之后,这个脚手架就完成搭建了!

尝试使用新搭建的脚手架

我们建立一个新的目录,并在下面去执行我们的脚手架命令

可以看到新建的文件夹里生成了一个html文件,我们打开看看这个文件是不是按照我们的模板渲染生成的

可以看到<title></title>标签里的name就是我们输入的demo,到此我们的脚手架就成功完成了!

展开阅读全文
打赏
3
0 收藏
分享
加载中
支持大牛棒棒哒!!!
2020/12/16 10:45
回复
举报
更多评论
打赏
1 评论
0 收藏
3
分享
返回顶部
顶部