從0到1創建本身的腳手架一

結果展現

cmd執行命令行

npm install mcf-cli -g  //全局安裝mcf腳手架

mcf -V                  //查看mcf版本

mcf add                 //mcf添加模板

mcf list                //mcf查看模板列表

mcf init <模板名> [項目地址]    //根據模板建立項目

mcf delete <模板名>    //mcf刪除模板

mcf create-vue test     //建立vue項目
複製代碼

上面幾行命令行讓你對mcf-cli有個印象，讓你知道腳手架能作什麼，和怎麼作

出發點

自從自學了vue以後，老是被前端工程化的開發步驟驚歎，用Vue-cli從0搭建了一個Vue項目，一步一步配置,而後npm i, npm run dev，打開連接localhost:8080,一個網頁就這麼寫好了，嘴裏不自覺的吐出了兩個字：'NB'。

隨着學習和使用的不斷深刻，爲何咱們本身不能搭個腳手架工具呢！想到就嘗試着作吧！

腳手架的實質

如圖：

所示：

1. 命令的解析,這個能夠藉助commander實現；
2. 文件的操做，複製，粘貼，增長，刪除，文件內容的新增，替換；這個能夠藉助fs-extra實現； 3.模板文件，就以本身對前端工程化粗淺的認識，寫一個最牛（cu）逼（lou）的模板項目；

申請一個npm帳號，這個不算實現的功能，算附屬工做；

意義

隨着前端工程化的概念愈來愈深刻人心，腳手架的出現就是爲減小重複性工做而引入的命令行工具，擺脫ctrl + c, ctrl + v，此話怎講?

如今新建一個前端項目，已經不是在html頭部引入css，尾部引入js那麼簡單的事了，css都是採用Sass或則Less編寫，在js中引入，而後動態構建注入到html中；

除了學習基本的js，css語法和熱門框架，還須要學習構建工具webpack，babel這些怎麼配置，怎麼起前端服務，怎麼熱更新；爲了在編寫過程當中讓編輯器幫咱們查錯以及更加規範，咱們還須要引入ESlint；甚至，有些項目還須要引入單元測試（Jest）。

對於一個剛入門的人來講，這無疑會讓人望而卻步。

而前端腳手架的出現，就讓事情簡單化，一鍵命令，新建一個工程，再執行兩個npm命令，跑起一個項目。

在入門時，無需關注配置什麼的，只須要開心的寫代碼；另外，對於不少系統，他們的頁面類似度很是高，因此就能夠基於一套模板來搭建，雖然是不一樣的人開發，但用腳手架來搭建，相同的項目結構與代碼書寫規範，是很利於項目的後期維護的

準備知識

上了年紀，喜歡扯，扯遠了，迴歸正題，動手作吧，首先咱們要進行一些前期的準備工做：

一、commander庫

commander.js是一個幫助快速開發Node.js命令行工具的包(庫)

腳本解釋程序：

#! /usr/bin/env node
複製代碼

在代碼的開頭第一行，必須指定咱們的腳本執行所須要的解釋程序, 目的是使用env來找到node，並使用node來做爲程序的解釋程序。

二、chalk插件

chalk是一個顏色的插件。能夠經過chalk.blue(‘hello world’)來改變顏色

const chalk = require('chalk')
...
console.log(chalk.blue('Hello') + 'World' + chalk.red('!'));
console.log(chalk.blue.bgRed.bold('Hello world!'));
console.log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));
複製代碼

三、download-git-repo插件

download-git-repo是一個用來從git上下載項目的插件，基本用法以下： 參考詳細用法上傳送門

var download = require('download-git-repo');

download('這個參數?', '目標地址', function (err) {
  console.log(err ? 'Error' : 'Success')
})
複製代碼

四、ora插件

用來實現node.js命令行環境的loading效果，和顯示各類狀態的圖標等

用法：

const ora = require('ora')
...
const spinner = ora(`正在下載項目模板`)
spinner.start()
...
spinner.fail()
...
spinner.succeed()
複製代碼

五、 inquirer插件

對於命令行交互的功能，能夠用inquirer.js來處理。用法其實很簡單：

const inquirer = require('inquirer') 

inquirer.prompt([
  {
    name: 'projectName',
    message: '請輸入項目名稱'
  }
]).then(answers => {
  console.log(`你輸入的項目名稱是：${answers.projectName}`)
})
複製代碼

prompt()接受一個問題對象的數據，在用戶與終端交互過程當中，將用戶的輸入存放在一個答案對象中，而後返回一個Promise，經過then()獲取到這個答案對象。so easy！

六、 metalsmith插件

它就是一個靜態網站生成器，能夠用在批量處理模板的場景，相似的工具包還有Wintersmith、Assemble、Hexo。它最大的一個特色就是EVERYTHING IS PLUGIN（萬物皆插件），因此，metalsmith本質上就是一個膠水框架，經過黏合各類插件來完成生產工做。

七、 handlebars模板

模板引擎我選擇handlebars。固然，還能夠有其餘選擇，例如ejs、jade、swig。

用handlebars的語法對模板作一些調整，例如修改模板中的package.json

八、 npm帳號的註冊

www.npmjs.com/signup 該網址註冊，註冊須要注意的坑，

username，password，email三者記清楚，何時須要用戶名，何時須要密碼，何時須要郵箱，填寫的時候須要看清楚，別問我怎麼知道的，多踩幾回坑你就什麼都知道了！

九、 npm包的建立、開發、發佈

npm init  初始化項目

npm login  依次輸入username，password，email

npm pubic 發佈項目
複製代碼

以及其餘的命令行

npm adduser
npm link
npm unlink
複製代碼

我能想到的暫時就這麼多，有須要之後再加！

好處

讓項目從"搭建-開發-部署"更加快速以及規範 不要讓本身成爲碼畜, 既要會寫還要懂原理