首页 > 其他 > 详细

脚手架的工作原理

时间:2021-02-22 20:16:14      阅读:24      评论:0      收藏:0      [点我收藏+]

1、通过node.js去开发一个小型的脚手架工具

脚手架工具实际上是一个node cli应用,创建脚手架工具实际上就是创建cli应用

(1)在项目目录下初始化package.json

yarn init

(2)vscode打开这个目录,在package.json中添加bin字段,用来指定入口文件

"bin":"cli.js"

添加之后是这个样子滴

{
  "name": "sample-scaffolding",
  "version": "1.0.0",
  "main": "index.js",
  "bin": "cli.js",
  "license": "MIT"
}

(3)在根目录下新建cli.js

#!/usr/bin/env node

// Node CLI应用入口文件必须要有这样的文件头
// 如果是Linux或者是macOS系统下还需要修改此we年的读写权限为755
// 具体就是通过chmon755 cli.js实现修改
console.log(‘cli working‘)

(4)在命令行通过yarn link的方式将这个模块link到全局

yarn link

(5)在命令行当中使用sample-scaffolding执行cli.js,如果命令行输出结果为"cli working",说明执行成功

sample-scaffolding

(6)使用inquirer进行命令行交互,安装inquirer

yarn add inquirer

(7)脚手架的工作过程

cli.js

//1、通过命令行交互询问用户问题
//2、根据用户回答的结果生成文件
const inquirer = require(‘inquirer‘);
inquirer.prompt([
    {
        type:‘input‘,
        name:‘name‘,
        message:‘Project name‘
    }
]).then(answer=>{
    console.log(answer);
})

(8)在命令行执行sample-scaffolding,能返回结果说明执行成功

sample-scaffolding

(9)新建模板目录templates/index.html

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= name %>
    </title>
</head>

<body>

</body>

</html>

(10)新建templates/style.css(第二个模板)

style.css

body {
    margin: 0;
    background-color: #f8f9fb;
}

(11)需要用到通过模板引擎渲染文件,所以安装模板引擎

// 这里安装的是ejs模板引擎
yarn add ejs

(11)创建一个新的文件目录demo

(12)在新的文件目录命令行下执行sample-scaffolding,将会在demo目录下生成模板文件渲染出来的文件

(13)完整编码

cli.js

#!/usr/bin/env node

// Node CLI应用入口文件必须要有这样的文件头
// 如果是Linux或者是macOS系统下还需要修改此we年的读写权限为755
// 具体就是通过chmon755 cli.js实现修改
console.log(‘cli working‘)

//脚手架的工作过程:
//1、通过命令行交互询问用户问题
//2、根据用户回答的结果生成文件
const fs = require(‘fs‘);
const path = require(‘path‘);
// 引入模板引擎
const ejs = require(‘ejs‘);
const inquirer = require(‘inquirer‘);
inquirer.prompt([
    {
        type:‘input‘,
        name:‘name‘,
        message:‘Project name‘
    }
]).then(answer=>{
    // console.log(answer);
    // 根据用户回答的结果生成文件
    // 模板目录
    const tmplDir = path.join(__dirname,‘templates‘);
    // 目标目录
    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)
            })
        })
    })
})

 

脚手架的工作原理

原文:https://www.cnblogs.com/phantomyy/p/14432028.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!