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

標籤：開始   ted   頁面   into   page   使用   http服務   ora   預設   

STEP 1：設定開發環境

與 Yeoman 的所有互動都是通過命令列。Mac 系統使用 terminal.app，Linux 系統使用 shell，windows 系統可以使用 cmder/PowerShell/cmd.exe。

1.1 安裝條件

安裝yeoman之前，你需要先安裝如下內容

• Nodejs v4 或者更高版本
• npm
• git

通過以下命令檢查是否安裝 Node 環境以及 npm 管理工具。

$ node -v && npm -v

npm 預設隨 Node 一起安裝。有些 Node 版本可能安裝的是舊版本的 npm，你可以通過以下命令更新 npm

$ 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