$ node -v && npm -v

$ npm install -g [email protected]

通過以下命名檢查是否安裝git

$ git --version

1.2 安裝yeoman工具箱

如果已經安裝了 node 環境，可以通過以下命令安裝 Yeoman

$ npm install -g yo

1.3 確認安裝

首先確認 Yeoman 是否正確安裝

$ yo --version

STEP 2：安裝Yeoman生成器

在傳統的 web開發中，你需要花大量時間為你的 webapp 設置模板代碼、下載依賴包以及手動創建文件目錄結構。Yeoman 的生成器會幫你搞定這一切。讓我為 FountainJS 項目安裝一個生成器。

2.1安裝生成器

你可以通過 npm 命令安裝 Yeoman 生成器，目前可用的生成器超過了 3500 個，大多數都是開源社區貢獻的。

通過以下命令安裝 generator-fountain-webapp

$ npm install -g generator-fountain-webapp

該命令將安裝生成器所需的node包。

和使用 npm install 一樣，你可以通過 Yeoman 的交互菜單搜索 generators。

運行 yo 然後選擇 Install a generator 來搜索發布的生成器。

STEP 3：使用生成器搭建我們的app

我們已經使用多次“腳手架”這個詞，但是你可能還不知道它是什麽意思。在 Yeoman的 語境中，腳手架材料表示通過一些配置為你的 webapp 生成文件。在這一步中，你會看到 Yeoman 如何為你喜歡的庫及框架生成文件，以及使用如 webpack/babel/Sass 等一些額外的庫的配置。

3.1 創建項目文件夾

創建 mytodo 文件夾

$ mkdir mytodo && cd mytodo

生成器生成的腳手架文件會放在這個文件夾中。

3.2 通過 Yeoman 菜單使用生成器

再次運行 yo

$ yo

如果你已經安裝了多個 generator，你需要從中選擇一個。選中 Fountain Webapp，按回車 enter 運行生成器。

3.3 配置生成器

為了加快開發環境的初始化設置，有些生成器也會提供選項來自定義你的app的基礎開發庫。

FountainJS 生成器提供一些選項來匹配你的喜好。

• 框架（React，Angular2，Angular1）
• 模塊管理工具（Webpack，SystemJS，none with bower）
• JavaScript預處理器（babel，TypeScript，none）
• css 預處理器（Sass，Less，none）
• 三個模板app（a landing page，hello world，TodoMVC）

在該案例中，我們會使用 React, Webpack, Babel, SASS，Redux TodoMVC 模板。

方向鍵選擇，回車鍵確認。

Yeoman 會自動搭建你的 app，獲取依賴包。幾分鐘之後我們將進行下一步。

STEP 4：查看Yeoman生產的app的目錄結構

打開你的 mytodo

目錄，看一下腳手架搭建了什麽。應該如下圖所示:

在 mytodo 文件夾中，我們有：

src： web應用的父目錄

• app：React+Redux的代碼
• index.html：基礎html文件
• index.js：TodoMVC app 的入口文件

conf：配置文件及第三方工具的父目錄（Bowersync，Webpack，Gulp，karma）

gulp_tasks 和 gulpfile.js：構建任務

.babelrc，package.json，node_modules：配置以及所需依賴包

.gitattributes 和 .gitignore：git的配置

STEP 5：在瀏覽器中預覽你的app

如果想要在你喜歡的瀏覽器上預覽你的 web app，你無須在電腦上做任何事情來設置本地服務器。這些都是 Yeoman 所做的一部分。

5.1 打開服務器

運行 npm 腳本，創建在 localhost:3000 (或者127.0.0.1:3000) 上預覽的基於 node 的本地 http 服務器。

$ npm run serve

在瀏覽器的新頁面打開localhost:3000

5.2 停止服務器

如果你想停止服務器，按 Ctrl + C 停止當前CLI的進程

註意：你不能在同一端口運行多個http服務器（默認3000）

5.3 查看你的文件

打開你喜歡的文本編輯器開始做點改變。每一次改變都會強制瀏覽器刷新而不需要你親自操作。這種方式叫做即時加載（live reloading），可以實時查看app狀態。

即時加載的功能是通過配置 gulpfile.js 中的 gulp tasks 以及 gulp_tasks/browsersync.js 中的 Browsersync 實現的。它會監測你的文件的變化然後自動加載。

如下，我們編輯 src/app/components 路徑下的 Header.js

修改立即生效

STEP 6：使用karma和jasmine測試

有些人可能不熟悉Karma，它是不依賴於框架的測試運行器。Fountainjs 生成器中已經包含 jasmine 測試框架。。。。

6.1 運行測試單元

讓我們返回命令行按 Ctrl+C 停止本地服務器。package.json 中已經有了運行測試單元的 npm 腳本。可以如下運行

$ npm test

每一個測試都應該通過.

6.2 升級單元測試

你可以在 src 文件夾中找到單元測試腳本，打開 src/app/reducers/todos.spec.js 。這是為 Todos reducers 編寫的單元測試。舉個例子，我們看一下驗證初始狀態的第一個測試。

it(‘should handle initial state‘, () => {
  expect(
    todos(undefined, {})
  ).toEqual([
    {
      text: ‘Use Redux‘,
      completed: false,
      id: 0
    }
  ]);
});

按如下修改

it(‘should handle initial state‘, () => {
  expect(
    todos(undefined, {})
  ).toEqual([
    {
      text: ‘Use Yeoman‘, // <=== here
      completed: false,
      id: 0
    }
  ]);
});

重新運行 npm test，可以看到如下錯誤

if you want run test automatically on change you can use npm run test:auto instead

打開 src/app/reducers/todos.js

把初始狀態改成

const initialState = [
  {
    text: ‘Use Yeoman‘,
    completed: false,
    id: 0
  }
];

你成功修復了測試

如果你的 app 越來越大或者更多的開發者參與進來，編寫單元測試可以更容易的發現 bug。

STEP 7：使用 Local Storage 永久保存 todos

讓我們重新看一下當刷新瀏覽器時 React/Redux mytodo 不能保存的問題。

7.1 安裝 npm 包

為了輕松解決這個問題，我們可以使用另一個Redux模塊“redux-localstorage”，它可以快速執行local storage。

運行以下命令

$ npm install --save [email protected]

7.2 使用redux-localstorage

Redux 需要配置才能使用，將 src/app/store/configureStore.js 修改如下

import {compose, createStore} from ‘redux‘;
import rootReducer from ‘../reducers‘;

import persistState, {mergePersistedState} from ‘redux-localstorage‘;
import adapter from ‘redux-localstorage/lib/adapters/localStorage‘;

export default function configureStore(initialState) {
  const reducer = compose(
    mergePersistedState()
  )(rootReducer, initialState);

  const storage = adapter(window.localStorage);

  const createPersistentStore = compose(
    persistState(storage, ‘state‘)
  )(createStore);

  const store = createPersistentStore(reducer);
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept(‘../reducers‘, () => {
      const nextReducer = require(‘../reducers‘).default;
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

如果你瀏覽器中查看應用程序，你會在待辦事項列表看到一項“Use Yeoman”。

應用程序初始化時，如果本地存儲是空的，則列表中不會有事項。

繼續前進，並添加一些項目到列表中：

現在當我們刷新瀏覽器列表項依然存在。萬歲!

我們可以確認一下數據是否保存在本地存儲中，打開chrome瀏覽器的檢查工具，產看 Resources 面板，從左邊欄選擇 Local Storage

STEP 8：為生產做準備

準備好把你 todo 應用程序展示給世界了嗎？讓我們嘗試建立一個準備生產的版本。

8.1 優化產品文件

為了創建應用程序的生產版本，我們需要

• lint 代碼
• 合並和縮小我們的腳本及樣式來拯救那些網絡請求，
• 編譯預處理器的輸出結果，
• 使應用程序更精煉

哇！令人驚訝的是，所有運行都可以通過：

$ npm run build

你的準備就緒的應用程序在 mytodo 項目的 dist 目錄下，你可以使用FTP發布到服務器。

8.2 建立及預覽生產的應用程序

如果想在本地預覽 app，可以運行下面的 npm 腳本

$ npm run serve:dist

它會創建你的項目並且啟動本地服務器。

Yeoman 官網教學案例：使用 Yeoman 構建 WebApp