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

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

?開箱即用的全棧開發(fā)體驗(yàn)

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

?Async/Await 支持

?SASS預(yù)編譯器, PostCSS, autoprefixer支持

?加入簡(jiǎn)單API代理，再無需繁瑣的nginx配置

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

??一鍵部署到生成環(huán)境

?長(zhǎng)期維護(hù)...?

框架的服務(wù)端基于koajs, 下一代NodeJS MVC框架， 開發(fā)者依然是著名的expressjs的核心開發(fā)成員。koa支持最新的async/await語法，讓你寫出更好的異步代碼。并且，Koa擁有一個(gè)更好的，更語義化的中間件機(jī)制，你可以專注在開發(fā)更小更集中于特定功能的各種中間件，然后再組合起來組成一個(gè)功能強(qiáng)大的框架，而不是直接嵌入很多的功能到koa的核心中，使得koa也是個(gè)更加輕量級(jí)的框架。

任何一個(gè)現(xiàn)代的web應(yīng)用都會(huì)有一個(gè)可能用其他語言開發(fā)的API層(e.g, java, go...), 這些API可能部署在另一個(gè)域名上，加上我們需要而外的在一個(gè)反向代理(nginx)服務(wù)器上去配置以解決前端跨域的問題。而一般來說這些都是有運(yùn)維去配置，使得你的前端開發(fā)環(huán)境的配置復(fù)雜而又浪費(fèi)時(shí)間。所以在koa-web-kit中，我們也預(yù)綁定一個(gè)簡(jiǎn)單的API代理來加速你的前端環(huán)境配置，你只需要配置需要的api prefix來指向?qū)?yīng)實(shí)際的API地址，簡(jiǎn)單例子如下:

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",
  }
}

因此你不需要多帶帶的配置你的反向代理，只需要輸入一些簡(jiǎn)單的配置就OK了。

一般來說在生產(chǎn)環(huán)境下，建議還是配置反向代理來轉(zhuǎn)發(fā)你的api請(qǐng)求直接去后端，而不去直接發(fā)到node, 然后再轉(zhuǎn)到后端，這樣可能會(huì)使你的node服務(wù)請(qǐng)求過多。實(shí)際情況以項(xiàng)目為準(zhǔn)。

然后日志服務(wù)對(duì)一個(gè)服務(wù)端應(yīng)用來說也必不可少，koa-web-kit也提供一個(gè)簡(jiǎn)單的log服務(wù)，基于著名的異步日志庫winston，如：

const logger = require("./services/logger");
logger.info(msg);
logger.warn(msg);
logger.error(msg);

你可以對(duì)不同的需求添加自定義的輸出到不同的文件，數(shù)據(jù)庫等等。默認(rèn)情況下日志文件在項(xiàng)目根目錄的./logs文件夾下。

一般來說我們都會(huì)優(yōu)化壓縮前端的資源文件(css, js, html...)，來加速頁面的加載，但是很少有人會(huì)考慮壓縮node端的代碼，在某些情況下你不想別人看到你的服務(wù)端代碼，壓縮node端的代碼也是必不可少的。在koa-web-kit中，我們也提供了build腳本來壓縮你的nodejs代碼，cheers?.

假設(shè)你需要?jiǎng)討B(tài)模板渲染，除了靜態(tài)的html加上通過React渲染出來的內(nèi)容，koa-web-kit默認(rèn)使用了nunjucks來作為模板渲染引擎，但是要是你習(xí)慣其他的模板引擎，只需install你喜歡的庫即可，版本引擎基于consolidate.js來處理，所以你可以使用任意支持的模板?。
對(duì)于React SSR(服務(wù)端渲染)，正在開發(fā)中，但如果需要的話你可以去使用一些框架如next.js。

對(duì)于一個(gè)所謂的全棧開發(fā)框架來說，應(yīng)該還需要有一個(gè)數(shù)據(jù)庫的集成吧？是的，那是必須的，但是為了使koa-web-kit更輕量級(jí)，又不至于只限定于預(yù)先加入的數(shù)據(jù)庫，并且對(duì)于現(xiàn)在web開發(fā)來說，所有的東西都需要模塊化，因此你可以輕松的npm install任意你想要的數(shù)據(jù)庫層的庫來滿足你的持久化的需求，還有一種情況是你的數(shù)據(jù)層面的服務(wù)可能已經(jīng)由另一個(gè)團(tuán)隊(duì)用另一種語言開發(fā)好了，你只需調(diào)用API即可（就像上面的API代理配置），因此的話預(yù)先沒有綁定某一個(gè)持久化庫，按你的需求安裝即可。

另一個(gè)koa-web-kit比較cool的功能是，你可以通過很多不同的方式去設(shè)置你的app環(huán)境變量。我們都知道，每一個(gè)項(xiàng)目都需要一個(gè)環(huán)境變量來設(shè)置不同的運(yùn)行環(huán)境，比如在開發(fā)環(huán)境下，我們需要發(fā)送API請(qǐng)求到開發(fā)地址，當(dāng)部署到線上后需要配置API地址為線上的地址；還有一種情況是在開發(fā)環(huán)境下，我們會(huì)log很多的輸出到控制臺(tái)，但到了生成，我們需要把這些調(diào)試的log都去掉，等等... 還有很多第三方庫如React, 會(huì)根據(jù)不同的NODE_ENV來做不同的優(yōu)化。所以環(huán)境變量的設(shè)置對(duì)我們的項(xiàng)目來說是很重要的，在koa-web-kit中，你可以通過不同的方式去設(shè)置你的環(huán)境變量：

在config文件夾下的app-config.js/app-config.js.sample, 你可以copyapp-config.js.sample 到 app-config.js, 然后為你的本地開發(fā)環(huán)境設(shè)置不同的變量.

環(huán)境變量(Environment Variables), 當(dāng)你運(yùn)行一些腳本時(shí), 你可以通過命令行或者shell腳本來覆蓋你本地配置文件app-config.js的配置

默認(rèn) config.default/dev(prod).js 文件, 只在你以上2個(gè)方式都沒有配置的時(shí)候去使用.

詳情請(qǐng)參考 koa-web-kit#ENV_Configuration.

好了，終于到前端開發(fā)的部分了，koa-web-kit使用了社區(qū)最新的UI庫，開發(fā)工具來讓你的開發(fā)體驗(yàn)更好，包括：

React-v16, 目前最流行的UI庫，擁有強(qiáng)大的社區(qū)支持，幾乎能找到任意你想要的功能(喜歡Vue.js?, 可以看看vue-web-kit).

Bootstrap-v4, 最流行的CSS/layout框架(只使用CSS部分，放心沒有jQuery).

擁抱ES6+, 通過webpack和babel, 我們可以使用最新js標(biāo)準(zhǔn)來開發(fā)我們的應(yīng)用，而無需關(guān)注瀏覽器兼容性，新語法的編譯會(huì)根據(jù)你配置的browerslist來處理.

SASS/SCSS 預(yù)編譯器, 包括PostCSS及autoprefixer而無需關(guān)注瀏覽器廠商的css屬性前綴, 依然基于browerslist來處理; 你可以添加任意喜歡的CSS-in-JS方案來作為你的主題/樣式方案。

當(dāng)你完成了前端及服務(wù)端的開發(fā)后，是時(shí)候部署到生成環(huán)境來為你的用戶提供服務(wù)了。通過koa-web-kit，部署流程將會(huì)非常簡(jiǎn)單，通過簡(jiǎn)單的一個(gè)npm腳本即可完成依賴安裝，資源打包，啟動(dòng)node服務(wù)的流程，也可以通過選項(xiàng)來略過其中的一些步驟，npm腳本如:

npm run deploy, 不加任何選項(xiàng)，完整走流程 ，
npm run deploy -- 1 0 1, 只會(huì)build資源文件，
更多選項(xiàng) koa-web-kit#Deploy

雖說koa-web-kit是一個(gè)全棧開發(fā)框架，如果你不需要服務(wù)端的功能，你依然可以只生成一個(gè)靜態(tài)站點(diǎn)，然后直接扔到靜態(tài)服務(wù)器上（Github Pages, Netlify等等）即可。
當(dāng)生成一個(gè)靜態(tài)站點(diǎn)的時(shí)候，需要考慮的是prefix path，在一些著名的靜態(tài)站點(diǎn)生成器如Gatsby中，也有這方面的說明，比如需要部署在Github Pages上，項(xiàng)目根目錄一般在http://user.github.io/project下，這里的/preject就是上面的prefix path, 所有的資源請(qǐng)求都必須在/project下，不然就可能報(bào)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",
}

那在我們的代碼中又如何去拿到這個(gè)值呢(比如在你的組件中)？很簡(jiǎn)單, 在你的組件中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也會(huì)根據(jù)prefix配置動(dòng)態(tài)的加上這些前綴。
如果你想讓你的所有靜態(tài)資源都是用相對(duì)路徑的話, 沒有"/"，設(shè)置如下：
PREFIX_TRAILING_SLASH: false, STATIC_PREFIX: "", APP_PREFIX: "".

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

With ? by koa-web-kit.