前端建構自己的腳手架工具

項目倉庫

指令行工具需要用到的依賴

• node環境
• commander用于定義指令
• inquire用于和使用者進行互動
• chalk讓指令行的字元帶上顔色
• progress指令行進度條

配置一個腳手架工具的流程

• 編寫腳手架工具項目
• 配置pakage.json
• 釋出到npm(本地測試可以使用npm link)
• 運作指令
• 解析指令
• 下載下傳模闆

//注意本地測試需要npm link注冊指令
sudo npm link
           

Index.js

#!/usr/bin/env node
const cm = require('commander');
const inquirer = require('inquirer');
const chalk = require('chalk');
const down = require('./download')

// console.log('hello world')
// console.log(chalk.blue('hello smileyqp'))
// console.log(chalk.yellow('yellow'))

cm.version('1.0.0','-v --version')

cm.command('init <name>').action((name)=>{
    inquirer.prompt([
        {
            type:"input",
            name:'projectname',
            message:'項目叫什麼名字'
        }
    ]).then((answer)=>{
        console.log(answer)
        console.log(name)
       down(answer.projectname)
    })
})

cm.parse(process.argv)
           

download.js

const fs = require('fs')
module.exports = function(name){
//node讀取檔案不能整個讀取，它隻能讀取到檔案夾裡面的内容資訊
var demopath = './project'
var targetpath = './'+name;

//資料驅動思維
var arr = []
fs.mkdir(targetpath,function(){
    pusharr(demopath)
    
    //forEach循環中有異步，會導緻問題，用閉包解決
    arr.forEach((item,index)=>{
        (function(item){
            console.log(item)
            if(item[0] =='file'){
                fs.readFile(item[1],(err,data)=>{
                    fs.writeFile(targetpath+'/'+item[1].replace('./project','.'),data,function(){})
                })
            }else{
                fs.mkdir(targetpath+'/'+item[1].replace('./project','.'),function(){})
            }
        })(item)
    })
})

function pusharr(path){
    var files = fs.readdirSync(path)
        files.forEach((item,index) => {
            var nowpath = path + '/'+item;
            var stat = fs.statSync(nowpath)
            if(stat.isDirectory()){ //如果是檔案夾
                arr.push(['dir',nowpath])
                pusharr(nowpath) //是檔案夾繼續調用這個方法，進行遞歸
            }else{
                arr.push(['file',nowpath])
            }
        });
    } 
}