前端工程化系列[05] Yeoman腳手架使用入門

Yeoman是一款流行的前端的腳手架工具。

腳手架工具能夠用來快速的自動生成項目的必要文件和基礎文件結構。Yeoman使用的內建命令爲yo，同時它本身也是一個包管理工具和自動化任務工具，它基於特定的模板來初始化項目。

考慮這樣的開發場景：如今咱們須要開始一個全新的前端項目，一般須要先處理項目的文件結構，建立包括img、JavaScript、CSS 等靜態資源的文件夾，若是團隊開發，可能還須要添加 .gitignore忽略文件以及.editorconfig、.eslintrc、package.json、Gruntfile.js以及README.md等配置文件。

若是你進行的多個前端項目，它們的技術選型差很少(好比都是：jQuery + grunt + Vue + Bootstrap)，你會發現這些項目的總體文件結構是相同的。咱們在初始化項目的時候，固然能夠從0開始搭建，也能夠直接把舊項目的結構和相關文件拷貝過來，這其實都是些重複性沒有技術含量的工做，而Yeoman 的做用就是減小這些重複性的工做，經過調用 Yeoman 生態圈中的現成的生成器(generator)便可自動生成項目初始化所須要的文件結構、配置文件等。因此簡單來講，Yeoman 是一個用於初始化項目的模版工具，用完就能夠扔在一邊了。

關於Yeoman的更多信息能夠參考Yeoman官網和Github託管倉庫。

Yeoman的安裝和使用

用於初始化項目的模板被稱爲生成器（generator）, 在開源社區中已經有衆多現成的generator能夠供咱們使用（能夠在生成器列表頁使用關鍵字搜索）。在開始項目的時候，咱們能夠先搜尋是否有匹配當前項目技術棧的生成器，若是有的話直接用就行了，若是找不到合適的generator，那麼能夠考慮本身來寫一個Yeoman生成器，甚至經過很簡單的方式咱們就能夠把本身寫的生成器發佈出來造福社區。

這篇文章並不包含本身建立Yeoman生成器的內容，我只是想簡單介紹下Yeoman的特徵，以及如何使用Yeoman的生成器來初始化項目這個部分。

環境準備

安裝yeoman以前，你須要先安裝如下環境

• Node.js 6或更高版本
• npm 3或更高版本（一般安裝Node的時候默認安裝）
• Git版本控制工具

點擊NodeJS官網選擇對應系統和版本根據提示完成NodeJS的安裝，咱們能夠經過在終端輸入下面的命令來檢查Node和npm的安裝是否成功。

$ node --version && npm --version

有些 Node 版本可能安裝的是舊版本的 npm，你能夠經過如下命令來更新npm

$ npm install -g npm@latest

Git的安裝過程請自行百度(OSX 默認安裝)，您能夠經過如下命名來檢查Git

$ git --version

安裝Yeoman

經過下面的命令來安裝Yeoman並檢查是否安裝成功，當前最新版本爲2.0.1，-g表示全局安裝。

$ npm install -g yo
$ yo --version

generator-typeScript初始化項目示例

接下來咱們將選擇一個生成器(這裏以typescript爲例)來演示初始化項目的操做，Yeoman將會根據對應的生成器替咱們建立好package.json和bower.json等文件，而後自動安裝依賴。

① 新建 mytodo 文件夾，生成器生成的腳手架文件會放在這個文件夾中。

$ mkdir mytodo && cd mytodo

② 根據項目技術棧需求到官網列表搜索合適的生成器。
③ 經過npm來安裝指定的generator。

$ npm install -g generator-typescript

④ typescript生成器安裝完成後，使用yo命令來開始。

$ yo typescript

下面給出終端處理的具體細節：

wendingding:Blog wendingding$ mkdir mytodo && cd mytodo
wendingding:mytodo wendingding$ npm install -g generator-typescript
npm WARN deprecated npmconf@2.1.3: this package has been reintegrated into npm and is now out of date with respect to npm
 
> spawn-sync@1.0.15 postinstall /usr/local/lib/node_modules/generator-typescript/node_modules/spawn-sync
> node postinstall
 
> yo@1.8.5 postinstall /usr/local/lib/node_modules/generator-typescript/node_modules/yo
> yodoctor
 
Yeoman Doctor
Running sanity checks on your system
 
✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ Node.js version
✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version
 
Everything looks all right!
+ generator-typescript@0.3.0
added 608 packages in 138.302s
wendingding:mytodo wendingding$ yo typescript
 
_-----_
| | ╭──────────────────────────╮
|--(o)--| │ Let's make some awesome │
`---------´ │ typescript project! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
 
I will include JSHint and Editorconfig by default.
? First off, how would you like to name this project? wendingdingDemo
? Where should it be compiled to? app/build
? Where should your typescript go? app/src
create package.json
create app/src/index.ts
create app/src/app.ts
create tslint.json
create gulpfile.js
create test/test-greeting.js
create test/test-load.js
create README.md
create .editorconfig
create .jshintrc
 
 
I'm all done. Running npm install && bower install for you to install the required dependencies. If this fails, try running the command yourself.

按上面的步驟在終端中執行對應命令，咱們就能夠獲得一個基於基於typescript模板生成的初始化項目了，下面列出該項目的目錄結構：

wendingding:mytodo wendingding$ tree
.
├── README.md
├── app
│ ├── build
│ └── src
│ ├── app.ts
│ └── index.ts
├── gulpfile.js
├── package.json
├── test
│ ├── test-greeting.js
│ └── test-load.js
└── tslint.json
 
4 directories, 8 files

最後，根據Yeoman終端中的提示經過$ npm install && bower install命令來安裝必要的依賴便可。