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

時間 2019-11-08

標籤 yeoman 教學案例使用構建 webapp 欄目 Google 简体版

原文原文鏈接

本文是對 Yeoman 官網教學案例的翻譯。css

STEP 1：設置開發環境

與 Yeoman 的全部交互都是經過命令行。Mac 系統使用 terminal.app，Linux 系統使用 shell，windows 系統可使用 cmder/PowerShell/cmd.exe。html

1.1 安裝條件

安裝yeoman以前，你須要先安裝以下內容html5

Nodejs v4 或者更高版本
npm
git

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

$ node -v && npm -v

npm 默認隨 Node 一塊兒安裝。有些 Node 版本可能安裝的是舊版本的 npm，你能夠經過如下命令更新 npmwebpack

$ npm install -g npm@latest

經過如下命名檢查是否安裝gitgit

$ git --version

1.2 安裝yeoman工具箱

若是已經安裝了 node 環境，能夠經過如下命令安裝 Yeomangithub

$ npm install -g yo

1.3 確認安裝

首先確認 Yeoman 是否正確安裝web

$ yo --version

STEP 2：安裝Yeoman生成器

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

2.1安裝生成器

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

經過如下命令安裝 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 redux-localstorage@rc

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;
}