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

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.