下一代基于Koa的NodeJS全栈开发框架

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.