下一代基於Koa的NodeJS全棧開闢框架

2023年8月6日 166次阅读 来源: jasonboy7

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

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.

    原文作者：jasonboy7
    原文地址: https://segmentfault.com/a/1190000014416012
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞