node如何實現(xiàn)簡單的腳手架淺析

更新時間：2022年05月31日 09:15:19 作者：小跳蛙呀

在工作中,需要開發(fā)一個腳手架,用于給相關(guān)用戶提供相關(guān)的開發(fā)便利性,下面這篇文章主要給大家介紹了關(guān)于node如何實現(xiàn)簡單的腳手架的相關(guān)資料,需要的朋友可以參考下

腳手架的實現(xiàn)原理無外乎：

通過命令行交互詢問用戶問題

根據(jù)用戶的答案生成相應(yīng)的項目結(jié)構(gòu)

腳手架很多，比如特定語言封裝好的腳手架集成方案：react-app，vue-cli，還有通用的腳手架工具Yeoman，包括項目內(nèi)好用的模板生成工具plop等，今天我們來說一下用nodejs生成一個簡單的腳手架

首先創(chuàng)建文件夾，cd到當(dāng)前文件夾，并且初始化一個package.json文件

 mkdir sample-saclfolding 
 cd sample-saclfolding 
 yarn init

在項目根目錄下創(chuàng)建cli.js文件，并且在package.json中把cli.js設(shè)為入口文件

在根目錄下創(chuàng)造模板文件夾，并增加模板文件

node里面的命令行交互需要借助inquirer，在項目內(nèi)安裝inquirer

yarn add inquirer --dev

5.需要借助ejs渲染文件，在項目內(nèi)安裝ejs

yarn add ejs --dev

6.在cli.js里面增加腳手架執(zhí)行的業(yè)務(wù)邏輯

#! /usr/bin/env node 
//頭部必須加，用于指明這個腳本文件的解釋程序，增加這一行是為了指定用node執(zhí)行腳本文件

const inquirer = require('inquirer');
const path = require('path'); 
const ejs = require('ejs'); 
const fs = require('fs');
inquirer.prompt([ //inquirer.prompt方法命令行交互
    {
        type:'input', //方式：輸入
        name:'name',  //得到data的key值為'name'
        message:'your project name' //詢問用戶的問題
    }
]).then(answer=>{ //answer為用戶輸入的最終結(jié)果，返回：{name:'你輸入的答案'}
    const tmplDir=path.join(__dirname,'templates') //模板的路徑
    const destDir=process.cwd(); //目標(biāo)路徑
    fs.readdir(tmplDir,((err, files) => { //fs.readdir讀取路徑文件夾里的所有文件
        if(err) throw err
        files.forEach((file)=>{ //循環(huán)文件夾內(nèi)所有文件
            ejs.renderFile(path.join(tmplDir,file),answer, (err,result)=>{//根據(jù)文件渲染模板
                fs.writeFileSync(path.join(destDir,file),result)//根據(jù) 路徑，內(nèi)容 寫入文件
            })
        })
    })
    )
})