手把手教你如何開發(fā)一個簡單的腳手架

目錄

  • 入口文件搭建
  • 實現(xiàn)具體業(yè)務流程

入口文件搭建

  1. 首先npm init創(chuàng)建一個package.json
  2. package.json里面添加一個配置項中添加bin
{
  "name": "node-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  // 項目入口文件
  "bin": "cli.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

  1. 在根目錄下創(chuàng)建一個cli.js文件洛心,里面寫下面的內(nèi)容词身,頂格寫注釋(必寫)
#!/usr/bin/env node
console.log('cli working!')

#!/usr/bin/env node

Node CLI 應用入口文件必須要有這樣的文件頭
如果是 Linux 或者 macOS 系統(tǒng)下還需要修改此文件的讀寫權(quán)限為 755
具體就是通過 chmod 755 cli.js 實現(xiàn)修改

  1. 在當前目錄中運行npm link番枚,會自動創(chuàng)建一個package-lock.json文件
{
  "name": "node-cli",
  "version": "1.0.0",
  "lockfileVersion": 1
}
  1. 當前目錄運行node-cli
node-cli
> cli working!

這樣入口文件就搭建完畢了~

實現(xiàn)具體業(yè)務流程

重溫一下腳手架的工作過程:

  • 通過命令行交互詢問用戶問題(node中發(fā)起交互命令我們使用inquirer模塊)
  • 根據(jù)用戶回答的結(jié)果生成文件(入口文件中進行邏輯實現(xiàn))
  1. 完成模板創(chuàng)建
    在根目錄下創(chuàng)建templates文件夾,創(chuàng)建兩個文件
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= name %></title>
</head>
<body>
  
</body>
</html>
  • style.css
body{
  margin: 0;
  background-color: bisque;
}
  1. 安裝兩個npm模塊
# 用于命令行交互
npm install inquirer
# 用于模板引擎渲染
npm install ejs
  1. 編寫cli.js文件
  1. 引入需要的模塊
  2. inquirerprompt方法創(chuàng)建詢問深啤,數(shù)組里面的一個對象就是對應一個的問題
  3. then里面根據(jù)拿到的answers執(zhí)行任務
#!/usr/bin/env node
// 用于命令行交互
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(answers => {
  console.log(answers)
  // 引入path模塊路星,模板目錄寫絕對路徑
  const tmplDir = path.join(__dirname, 'templates')
  // 目標目錄:目標執(zhí)行的目錄,一般在cwd目錄
  const destDir = process.cwd()
  
  // 引入fs模塊,將模板下面文件全部轉(zhuǎn)換到目標目錄
  fs.readdir(tmplDir, (err, files) => {
    if(err) throw err
    files.forEach(file => {
      // 文件的相對路徑
      console.log(file) // index.html    style.css
      
      // 引入ejs模塊
      // 通過模板引擎渲染路徑對應的文件
      // 第一個參數(shù)是文件的絕對路徑
      // 第二個參數(shù)是模板引擎工作時候的數(shù)據(jù)上下文
      // 第三個參數(shù)是回調(diào)函數(shù)
      ejs.renderFile(path.join(tmplDir, file), answers, (err, result) => {
        if(err) throw err 
        // 成功的話就是已經(jīng)渲染過的文件
        console.log(result)
        // 寫入文件访诱,目標目錄絕對路徑韩肝,第二個參數(shù)是文件內(nèi)容
        fs.writeFileSync(path.join(destDir, file), result)
      })
    })
  })
})
  1. 創(chuàng)建另一個文件夾九榔,使用命令行
node-cli
> ? Project name? myProject

可以看到在新的項目中,生成了兩個文件

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>myProject</title>
</head>
<body>
  
</body>
</html>
  • style.css
body{
  margin: 0;
  background-color: bisque;
}

這樣我們就完成了一個簡單的自制腳手架剩蟀。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末育特,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子缰冤,更是在濱河造成了極大的恐慌喳魏,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件迷郑,死亡現(xiàn)場離奇詭異创倔,居然都是意外死亡,警方通過查閱死者的電腦和手機畦攘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門念搬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人朗徊,你說我怎么就攤上這事∫遥” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵棚壁,是天一觀的道長。 經(jīng)常有香客問我史隆,道長曼验,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任鬓照,我火速辦了婚禮,結(jié)果婚禮上拒秘,老公的妹妹穿的比我還像新娘臭猜。我一直安慰自己,他們只是感情好获讳,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布丐膝。 她就那樣靜靜地躺著,像睡著了一般帅矗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上浑此,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天凛俱,我揣著相機與錄音,去河邊找鬼蒲犬。 笑死,一個胖子當著我的面吹牛赫编,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播擂送,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼搬味!你這毒婦竟也來了躺苦?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎脐区,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體牛隅,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡媒佣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了欢嘿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片也糊。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖狸剃,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情虑省,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布探颈,位于F島的核電站允悦,受9級特大地震影響虑啤,放射性物質(zhì)發(fā)生泄漏架馋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一萍启、第九天 我趴在偏房一處隱蔽的房頂上張望屏鳍。 院中可真熱鬧勘纯,春花似錦钓瞭、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至鳞溉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間看政,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工帽衙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留贞绵,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓谴垫,卻偏偏與公主長得像母蛛,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子彩郊,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容