[JavaScript知识库] 模拟脚手架工作原理

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 模拟脚手架工作原理 -> 正文阅读

[JavaScript知识库]模拟脚手架工作原理

我们发现，不管是yoeman还是plop，都是通过用户输入的结果，创建相关类型的项目结果，而这些也可以通过Node进行模拟实现

新建项目文件 simulation-scaffold
初始化项目:yarn init -y
在package.json中添加入口文件：
- 在里面添加一行:` “bin”:“cli.js”,
- 然后创建cli.js文件，编写入口文件内容
  - 编写特定头文件 #! /usr/bin/env node
  - 测试：在cli.js中写入console.log('sx')
  - 通过yarn link 映射到全局
  - 通过输入项目名：simulation-scaffold即可运行。

#! /usr/bin/env node
//开头要有一个这个格式的头文件文件


console.log('sx')

接下来需要接受用户的输入
- 安装输入接收模块：yarn add inquirer
- 简单配置如下：

#! /usr/bin/env node
//开头要有一个这个格式的头文件文件

const inquirer = require("inquirer")
//接受用户的配置
inquirer.prompt([
    {
        type:'input', //用户输入类型,
        name:'projectName',//输入的键
        message:'Project name' //默认提示
    }
])
.then(ans=>{
    //收集到用户的输入
    console.log(ans)
})

在这里插入图片描述

接收到用户的输入之后，需要生成相应的文件，而文件的生成需要先创建好模板，然后只需要渲染模板，就能生成相关文件
- 创建template文件夹，创建相应的模板，模板遵循ejs规范
- 在node中依次读取到模板文件夹里的文件，然后根据用户输入的数据渲染

<!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><%= projectName%></title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h1><%= projectName%></h1>
</body>
</html>

在这里插入图片描述

读取到的文件需要挨个渲染，借助ejs模块可以实现渲染：yarn add ejs
最终将渲染的字符串生成文件即可

#! /usr/bin/env node
//开头要有一个这个格式的头文件文件

const inquirer = require("inquirer")
const ejs = require("ejs")
const fs = require("fs")
const path = require("path")
//接受用户的配置
inquirer.prompt([
    {
        type: 'input', //用户输入类型,
        name: 'projectName',//输入的键
        message: 'Project name' //默认提示
    }
])
    .then(ans => {
        //收集到用户的输入
        //获取渲染文件夹路径
        const tmpDir = path.join(__dirname, 'template')
        const targetDir = process.cwd()
        //读取路径下每一个文件
        fs.readdir(tmpDir, (err, file) => {
            if (err) {
                throw err
            }
            //ejs渲染文件
            file.forEach(fe=>{
                ejs.renderFile(path.join(tmpDir,fe),ans,(err,result)=>{
                    if(err)
                         throw err
                     fs.writeFileSync(path.join(targetDir,fe),result)
                })
            })
          
        })
    })