基于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.