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

?基于目前最流行的框架及庫, 包括但不限于 Koa2, React, Bootstrap-v4(CSS only), Webpack, ES6, Babel...

?開箱即用的全棧開發體驗

?熱加載功能HMR，bundle-size-analyzer 分析依賴大小，模塊之間的關系

?Async/Await 支持

?SASS預編譯器, PostCSS, autoprefixer支持

?加入簡單API代理，再無需繁瑣的nginx配置

?可以生成靜態Web App, ?SSR(WIP)

??一鍵部署到生成環境

?長期維護...?

框架的服務端基于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

雖說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

如果你是在代碼里import這些文件的話,Webpack loader也會根據prefix配置動態的加上這些前綴。
如果你想讓你的所有靜態資源都是用相對路徑的話, 沒有"/"，設置如下：
PREFIX_TRAILING_SLASH: false, STATIC_PREFIX: "", APP_PREFIX: "".

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

With ? by koa-web-kit.