從0到1開發一個本身的腳手架

什麼是腳手架？

腳手架能夠簡單的理解爲是自動爲咱們建立項目基礎文件的工具，總結它的做用有兩點：1、建立項目基礎結構；2、提供項目規範和約定。這些約定包括相同的組織結構、相同的開發範式、相同的模塊依賴、相同的工具配置、相同的基礎代碼等。腳手架工具能夠避免掉搭建項目時出現的重複工做。像vue-cli、create-react-app這些都是很成熟的腳手架工具。

關於Yeoman（ yeoman.io/ ）

Yeoman是目前來講最老牌最通用的腳手架工具，它不像vue-cli這種更具備針對性，它更像是一個腳手架運行平臺。能夠經過yeoman搭配不一樣的generator去建立任何類型的項目。 也就是說咱們能夠經過定製generator去定製本身的前端腳手架。

Yeoman的基本使用

• 在全局範圍安裝yo

$ npm i -g yo
複製代碼

• 安裝對應的generator

$ npm i  -g generator-node
複製代碼

• 經過generator運行yo

$ cd path // cd到目標muluxia
$ mkdir my-modules // 建立項目文件夾
$ yo node
複製代碼

• 想給項目增長部分功能，如：生成本身的cli

$ yo node:cli
$ sudo npm link
複製代碼

基於Yeoman搭建本身腳手架 （自定義generator）

$ mkdir generator-sample
$ npm init
$ npm i yeoman-generator
複製代碼

1. 建立生成器目錄

自定義generator的目錄結構

|__generators/.................................................生成器目錄 | |__app/.....................................................默認生成器目錄 | |__index.js..........................................默認生成器實現 |__package.json...............................................模塊包配置文件

2. 將index.js做爲genertor的核心入口，在此文件中須要導出一個繼承自yeoman-generator的類，yeoman-generator工做的時候會自動調用導出的類的生命週期方法。咱們在這些方法中能夠調用一些父類提供的工具和方法，實現一些功能。咱們下面就寫一個文件寫入的功能。

代碼完成後，輸入 npm link 命令將一個generator-sample包連接到全局執行環境。 新建demo文件夾，執行 yo sample。在demo文件夾內生成露路徑/temp.txt內容爲隨機數的文件。

根據模板建立文件

1. 在app文件夾中新建template文件夾，template文件中放入目標模板。目標模板支持ejs（ ejs.bootcss.com/ ） 語法。
2. 修改index.js，利用fs模塊的copyTpl方法完成。

代碼完成後，cd到demo文件夾下執行命令 yo sample，成功生成foo.txt文件。

接受用戶輸入

利用父類的prompt對象實現接受用戶的輸入，修改index.js,接受用戶輸入的name

在foo.txt模板中接受

代碼完成後，cd到demo下執行命令yo sample