基於Koa2/React的NodeJS全棧開發框架

jasonboy7發表於2018-04-25
ReactNodeJS全棧框架

Github上的腳手架實在太多，可能大多數都是隻專注在前端的web開發，例如流行的React生態中的create-react-app和Vue生態中的Vue-cli, 但是可能作為像我一樣的全棧開發，一個只關注在前端開發的腳手架滿足不了所有的需求，我們可能需要開發更復雜的全棧JS的專案，所以這裡介紹又一個基於NodeJS的全棧開發框架 koa-web-kit，不一定適合所有人，但至少又多了個選擇?。

一些亮點功能

  • ✨基於目前最流行的框架及庫, 包括但不限於 Koa2, React, Bootstrap4(CSS only), Webpack4, ES6+, Babel7...
  • ?開箱即用的全棧開發體驗
  • ?熱載入功能HMR，bundle-size-analyzer 分析依賴大小，模組之間的關係
  • ?Async/Await 支援
  • ?CSS Modules, SASS預編譯器, PostCSS, autoprefixer支援
  • ?加入簡單API代理，再無需繁瑣的nginx配置
  • ?可以生成靜態Web App, ?SSR(服務端渲染)支援
  • ⚡️一鍵部署到生成環境
  • ?長期維護...?

服務端

框架的服務端基於koajs, 下一代NodeJS MVC框架， 開發者依然是著名的expressjs的核心開發成員。koa支援最新的async/await語法，讓你寫出更好的非同步程式碼。並且，Koa擁有一個更好的，更語義化的中介軟體機制，你可以專注在開發更小更集中於特定功能的各種中介軟體，然後再組合起來組成一個功能強大的框架，而不是直接嵌入很多的功能到koa的核心中，使得koa也是個更加輕量級的框架。

任何一個現代的web應用都會有一個可能用其他語言開發的API層(e.g, java, go...), 這些API可能部署在另一個域名上，加上我們需要而外的在一個反向代理(nginx)伺服器上去配置以解決前端跨域的問題。而一般來說這些都是有運維去配置，使得你的前端開發環境的配置複雜而又浪費時間。所以在koa-web-kit中，我們也預繫結一個簡單的API代理來加速你的前端環境配置，你只需要配置需要的api prefix來指向對應實際的API地址，簡單例子如下:

config = {
  //...other configs
  "API_ENDPOINTS": {
    //set a default prefix
    "defaultPrefix": "/prefix",
    //e.g http://127.0.0.1:3000/prefix/api/login -->proxy to--> http://127.0.0.1:3001/api/login
    "/prefix": "http://127.0.0.1:3001",
    "/prefix2": "http://127.0.0.1:3002",
  }
}
複製程式碼

因此你不需要單獨的配置你的反向代理，只需要輸入一些簡單的配置就OK了。

一般來說在生產環境下，建議還是配置反向代理來轉發你的api請求直接去後端，而不去直接發到node, 然後再轉到後端，這樣可能會使你的node服務請求過多。實際情況以專案為準。

然後日誌服務對一個服務端應用來說也必不可少，koa-web-kit也提供一個簡單的log服務，基於著名的非同步日誌庫winston，如：

const logger = require('./services/logger');
logger.info(msg);
logger.warn(msg);
logger.error(msg);
複製程式碼

你可以對不同的需求新增自定義的輸出到不同的檔案，資料庫等等。預設情況下日誌檔案在專案根目錄的./logs資料夾下。

一般來說我們都會優化壓縮前端的資原始檔(css, js, html...)，來加速頁面的載入，但是很少有人會考慮壓縮node端的程式碼，在某些情況下你不想別人看到你的服務端程式碼，壓縮node端的程式碼也是必不可少的。在koa-web-kit中，我們也提供了build指令碼來壓縮你的nodejs程式碼，cheers?.

假設你需要動態模板渲染，除了靜態的html加上通過React渲染出來的內容，koa-web-kit預設使用了nunjucks來作為模板渲染引擎，但是要是你習慣其他的模板引擎，只需install你喜歡的庫即可，版本引擎基於consolidate.js來處理，所以你可以使用任意支援的模板?。 對於React SSR(服務端渲染)，正在開發中，但如果需要的話你可以去使用一些框架如next.js。

對於一個所謂的全棧開發框架來說，應該還需要有一個資料庫的整合吧？是的，那是必須的，但是為了使koa-web-kit更輕量級，又不至於只限定於預先加入的資料庫，並且對於現在web開發來說，所有的東西都需要模組化，因此你可以輕鬆的npm install任意你想要的資料庫層的庫來滿足你的持久化的需求，還有一種情況是你的資料層面的服務可能已經由另一個團隊用另一種語言開發好了，你只需呼叫API即可（就像上面的API代理配置），因此的話預先沒有繫結某一個持久化庫，按你的需求安裝即可。

另一個koa-web-kit比較cool的功能是，你可以通過很多不同的方式去設定你的app環境變數。我們都知道，每一個專案都需要一個環境變數來設定不同的執行環境，比如在開發環境下，我們需要傳送API請求到開發地址，當部署到線上後需要配置API地址為線上的地址；還有一種情況是在開發環境下，我們會log很多的輸出到控制檯，但到了生成，我們需要把這些除錯的log都去掉，等等... 還有很多第三方庫如React, 會根據不同的NODE_ENV來做不同的優化。所以環境變數的設定對我們的專案來說是很重要的，在koa-web-kit中，你可以通過不同的方式去設定你的環境變數：

  • 在config資料夾下的app-config.js/app-config.js.sample, 你可以copyapp-config.js.sample 到 app-config.js, 然後為你的本地開發環境設定不同的變數.
  • 環境變數(Environment Variables), 當你執行一些指令碼時, 你可以通過命令列或者shell指令碼來覆蓋你本地配置檔案app-config.js的配置
  • 預設 config.default/dev(prod).js 檔案, 只在你以上2個方式都沒有配置的時候去使用.

詳情請參考 koa-web-kit#ENV_Configuration.

前端

好了，終於到前端開發的部分了，koa-web-kit使用了社群最新的UI庫，開發工具來讓你的開發體驗更好，包括：

  • React-v16, 目前最流行的UI庫，擁有強大的社群支援，幾乎能找到任意你想要的功能(喜歡Vue.js?, 可以看看vue-web-kit).
  • Bootstrap-v4, 最流行的CSS/layout框架(只使用CSS部分，放心沒有jQuery).
  • 擁抱ES6+, 通過webpack和babel, 我們可以使用最新js標準來開發我們的應用，而無需關注瀏覽器相容性，新語法的編譯會根據你配置的browerslist來處理.
  • SASS/SCSS 預編譯器, 包括PostCSS及autoprefixer而無需關注瀏覽器廠商的css屬性字首, 依然基於browerslist來處理; 你可以新增任意喜歡的CSS-in-JS方案來作為你的主題/樣式方案。

生產環境部署

當你完成了前端及服務端的開發後，是時候部署到生成環境來為你的使用者提供服務了。通過koa-web-kit，部署流程將會非常簡單，通過簡單的一個npm指令碼即可完成依賴安裝，資源打包，啟動node服務的流程，也可以通過選項來略過其中的一些步驟，npm指令碼如:

npm run deploy, 不加任何選項，完整走流程 ， npm run deploy -- 1 0 1, 只會build資原始檔，
更多選項 koa-web-kit#Deploy

Bonus Round: 生成靜態站點

雖說koa-web-kit是一個全棧開發框架，如果你不需要服務端的功能，你依然可以只生成一個靜態站點，然後直接扔到靜態伺服器上（Github Pages, Netlify等等）即可。 當生成一個靜態站點的時候，需要考慮的是prefix path，在一些著名的靜態站點生成器如Gatsby中，也有這方面的說明，比如需要部署在Github Pages上，專案根目錄一般在http://user.github.io/project下，這裡的/preject就是上面的prefix path, 所有的資源請求都必須在/project下，不然就可能報404，在koa-web-kit中配置如下:

{
  //optional, your cdn domain for your static assets if you have
  "STATIC_ENDPOINT": "http://cdn.com",
  //optional, additional prefix for your cdn domain
  "STATIC_PREFIX": "/public/",
  //trailing slash for "APP_PREFIX"
  "PREFIX_TRAILING_SLASH": true,
  //here is the prefix path for your app1, 
  //if "PREFIX_TRAILING_SLASH" is true,
  //the final "env.prefix" value(details below) will be "/app1/"
  "APP_PREFIX": "/app1",
}
複製程式碼

那在我們的程式碼中又如何去拿到這個值呢(比如在你的元件中)？很簡單, 在你的元件中import env.js:

//full path: "./src/modules/env.js"
import env from 'modules/env';

// -> "/app1/public/" , with extra static assets prefix
console.log(env.prefix); 
// -> "/app1/"
console.log(env.appPrefix); 
// concat your static url if it does not imported by a webpack loader
<img src={`${env.prefix}static/imgs/no-loader.png`}>
複製程式碼

如果你是在程式碼裡import這些檔案的話,Webpack loader也會根據prefix配置動態的加上這些字首。 如果你想讓你的所有靜態資源都是用相對路徑的話, 沒有'/'，設定如下： PREFIX_TRAILING_SLASH: false, STATIC_PREFIX: "", APP_PREFIX: "".

結論

以上就是 koa-web-kit簡單介紹, 喜歡的話可以試一下, 有問題的可以開個issue, 或者PR來建議新的功能. 希望能為你的nodejs全棧開發帶來方便.

With ? by koa-web-kit.

相關文章