[React] 用 nwb 快速開發 Components and Libraries

nwb

# 目的

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

# 前言

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


# 筆記

什麼是 nwb

nwb 是一個開發 ReactPreactInferno 的 toolkit,整合了開發時需要的工具,像是 WebpackBabelKarma
使用最新的 JS 語法(ES2015, ES2016, ES2017),預設設定上,可供使用 Promisefetch()async/await 等。
再來是對於 SassLessStylus 的支援,只需額外使用相對應的 plugin 就好,不需要額外設定!

nwb 強調它是一個 toolkit,不是一個 boilerplate

nwb 的優點

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

  1. 快速建構開發環境,大量減少建構環境的時間,把時間留在開發和設計上。
  2. Hot Module Replacement,讓開發產品自動更新,這應該已經是大家開發上不可或缺的開發利器。
  3. 顯示建置狀態,在 CLI 中顯示目前 compile 的狀態或報錯。
  4. 使用 Mocha 和 Expect,在 Karma(in PhantomJS) 跑單元測試,可以直接專心寫 test 檔就好。
  5. Travis CI,使用 Travis Continuous Integration 並將 code coverage 結果提供 Coveralls/codecov.io。
  6. ES5、ES 和 UMD,nwb 幫你一次打包三種 builds。
  7. Single Configuration files,可在 nwb.config.js 中客製 Webpack、Karma 或 npm builds 的設定。
  8. 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.jsreact-ocard.min.jsumd/ 中。

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

nwb new 後面除了 react-component 外,還可使用 react-apppreact-appinferno-app 分別創建你想開發的 app

3. 認識專案架構

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 中:

1
2
3
4
5
"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!


【參考資料】