# 目的

快速開發 React App or React Components(Libraries)。

# 前言

之前曾經使用 React 寫過幾個 Components 和 Library，但都是自己從頭搭建開發環境或是由 create-react-app 開始，要打包上傳 npm 的過程還蠻繁雜的！而前陣子發現 nwb 這個 toolkit，立馬寫了一個 Component 作嘗試，體驗還不錯，現在就來筆記分享一下！

# 筆記

什麼是 nwb

nwb 是一個開發 React、Preact 和 Inferno 的 toolkit，整合了開發時需要的工具，像是 Webpack、Babel 和 Karma。
使用最新的 JS 語法(ES2015, ES2016, ES2017)，預設設定上，可供使用 Promise、fetch()、async/await 等。
再來是對於 Sass、Less 和 Stylus 的支援，只需額外使用相對應的 plugin 就好，不需要額外設定！

nwb 強調它是一個 toolkit，不是一個 boilerplate。

nwb 的優點

個人覺得它所整合的開發環境還蠻完整的，從安裝、開發、測試到 打包上傳，完全不需要額外的設定(當然它也有提供讓開發者自行設定的方法)：

快速建構開發環境，大量減少建構環境的時間，把時間留在開發和設計上。
Hot Module Replacement，讓開發產品自動更新，這應該已經是大家開發上不可或缺的開發利器。
顯示建置狀態，在 CLI 中顯示目前 compile 的狀態或報錯。
使用 Mocha 和 Expect，在 Karma(in PhantomJS) 跑單元測試，可以直接專心寫 test 檔就好。
Travis CI，使用 Travis Continuous Integration 並將 code coverage 結果提供 Coveralls/codecov.io。
ES5、ES 和 UMD，nwb 幫你一次打包三種 builds。
Single Configuration files，可在 nwb.config.js 中客製 Webpack、Karma 或 npm builds 的設定。
Autoprefixd CSS，這個設定可以讓 styles 撰寫時自動生成支援各個瀏覽器的 prefixed。

以上所提及的，是我在原本開發上就會碰到和使用的，當然 nwb 還有很多細項的優點！

使用 nwb 開發 React Components/Libraries

1. 在環境中加入 nwb

1	npm install -g nwb

2. 使用 `nwb new` 創建 project

1	nwb new react-component react-ocard

在建置時，nwb 一定會 build 一個 ES5 的版本在 lib/ 中，所以在創建 component 時會跳提醒問你是否還要建置 ES6 module(看個人需求)：

1 2	Creating a react-component project... ? Do you want to create an ES6 module build? (Y/n)

接著，會問你是否需要建置 Universal Module Definition (UMD)：

1	? Do you want to create a UMD build? (y/N)

如果選擇 y，則會詢問你要使用的 global varible name 是什麼：

1	? Which global variable name should the UMD build set?

以上面舉的例子，我就輸入 ReactOCard，這樣若是使用 UMD 時，就可以直接使用 ReactOCard component！

Note: 建置時 nwb 會建一個 react-ocard.js 和 react-ocard.min.js 在 umd/ 中。

這樣，我們就創建好一個 react-ocard 的專案。

nwb new 後面除了 react-component 外，還可使用 react-app、preact-app 和 inferno-app 分別創建你想開發的 app

3. 認識專案架構

這個專案和平常我們在開發時的架構差不多，所以應該不陌生：

react-ocard
  ├ .gitignore
  ├ .travis.yml
  ├ CONTRIBUTING.md
  ├ nwb.config.js
  ├ package.json
  ├ README.md
  ├ demo
  │  └ src
  │     └ index.js
  ├ node_modules
  ├ src
  │  └ index.js
  └tests
    ├ .eslintrc
    └ index-test.js

demo/: 在此資料夾中放你對於 Component 的 demo，方便在 nwb 的 development server 中作開發和測試 Component。
src/: 這裡就是你的 React Component。
test/: nwb 會在這個資料夾中找到相對 src/ 的測試檔案 (檔名結尾為 .test.js、-test.js 或 .spec.js) 作測試。
nwb.config.js: 前面有提到，你可以透過這個設定檔調整或擴展 nwb 所提供的默認配置。

4. 認識指令

從 package.json 可看到相關的 scripts：

npm start - 啟動開發伺服器 run demo app
npm test - 跑測試
npm run test:coverage - 跑測試並在 coverage/ 中生成 coverage report
npm run test:watch - 跑測試並監看測試檔 (若測試黨有所變更，就會立即重跑測試，方便測試撰寫)
npm run build - 建置 Component (建置 lib/ 以便上傳至 npm)
npm run clean - 將 build 的資料夾清掉 (像是 lib/、es/ 和 umd/)

npm start 直接進入開發狀態！

5. 使用 Sass/Scss

如果開發時除了 inline styles 外，有撰寫 .scss 或 .sass，可以使用 plugin nwb-sass 來支援編譯，使用方法很簡單：

1	npm i nwb-sass --save-dev

這樣就會自動幫你編譯 .scss 或 .sass 檔囉！

這邊稍微聊一下，不知道對於如果 Component 是包含樣式的，大家是怎麼作的？
以目前我的開發習慣來說的話，都是將 .scss 寫在對應的 Component 資料夾中，當作 src/ 的一部分，再由 demo 中作 import，這樣 Component 本身就是乾淨沒有引入 styles 檔案的狀況；
而打包上傳至 npm 前，會將 轉譯後 .css 放在 css/ 或 styles/ 中。
這樣的話，使用 Component 時就是分開引入 (import component 和 styles)，不知道有沒有什麼建議的作法可供參考。
1
2
import MyComponent from 'react-mycomponent'
import 'react-mycomponent/styles/react-mycomponent.css'

6. 上傳至 npm

Components/Libraries 開發完成並且 build 完後，就可以上傳至 npm 囉！

1	npm publish

在 package.json 中可看到，nwb 預設是將 es/、lib/ 和 umd/ 打包在 npm package 中：

"files": [
    "es",
    "lib",
    "umd"
]

你可以自行添加要打包上傳的資料夾，像我就多設了 css 以便上傳 Component 的 styles。

# 後記

前一陣子看到 Yahoo! 的 懶人卡，覺得閱讀起來還不錯，設計簡潔又帶點微微的互動，所以原本就打算來實作看看；
再加上看到 nwb ，就決定用它來開發看看，沒想到還蠻容易上手的，加上剛好符合我開發環境的需求，所以在開發環境的建置上近乎是無痛使用 🤗🤗🤗

很久沒打筆記了… 但真心覺得不錯，所以筆記一下分享給大家作參考！

也跟大家分享一下這次作的練習 react-ocard，這是參考 Yahoo! 懶人卡 所寫的 React Component，技術上除了 React 外，還使用了 iScroll 5 (單純綁 iscroll.js)。
如果覺得還不錯的話，歡迎給個 ⭐ 或 Fork 一起讓它更完美喔！！

可能、也許、Maybe 之後會再打個 iScroll 用於 React 的筆記吧… 😋

2017.06.17 大事記

我為 nwb 寫的這篇文章而設計的封面圖，被原作者採用了！超開心的！！

That’s it, DONE!

【參考資料】

nwb：https://github.com/insin/nwb