文档章节

基于Koa2/React的NodeJS全栈开发框架

jasonboy7
 jasonboy7
发布于 2018/04/28 13:57
字数 2356
阅读 482
收藏 0

Github上的脚手架实在太多,可能大多数都是只专注在前端的web开发,例如流行的React生态中的create-react-app和Vue生态中的Vue-cli, 但是可能作为像我一样的全栈开发,一个只关注在前端开发的脚手架满足不了所有的需求,我们可能需要开发更复杂的全栈JS的项目,所以这里介绍又一个基于NodeJS的全栈开发框架 koa-web-kit,不一定适合所有人,但至少又多了个选择🤣。

Fetures功能

  • ✨基于目前最流行的框架及库, 包括但不限于 Koa2, React, Bootstrap-v4(CSS only), Webpack, ES6, Babel...
  • 📦开箱即用的全栈开发体验
  • 🔥热加载功能HMR,bundle-size-analyzer 分析依赖大小,模块之间的关系
  • 📉Async/Await 支持
  • 💖SASS预编译器, PostCSS, autoprefixer支持
  • 🎉加入简单API代理,再无需繁琐的nginx配置
  • 🌈可以生成静态Web App, 🏗SSR(PR)
  • ⚡️一键部署到生成环境
  • 👷长期维护...🍻

服务端

框架的服务端基于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.sampleapp-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
粉丝 0
博文 2
码字总数 3621
作品 0
私信 提问
【联想】B2B2C商城前端开发项目(react)

【需求描述】 一、项目背景: 需要开发一个B2B2C商城,项目主要分为前台商城和后台管理系统,后台接口甲方提供,现在需要将网站前端众包出来,寻找合适的前端团队承接。 二、甲方提供资料清单...

北京恒拓开源网络技术有限公司
2018/11/20
0
0
全栈工程师之路-Node.js

全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245&scene=1&srcid=032......

i5ting
2016/04/08
379
0
全栈工程师之路-Node.js

全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?_biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245&scene=1&srcid=03......

i5ting
2016/04/08
242
1
吴彦文/dianpinPlus

从零开始使用React全家桶开发电商系统 技术栈: react + react-router4.1 + redux + koa2 + koa-router + less + ES6/7 + webpack + fetch + bundle-loader 项目说明: 基于 react react-ro......

吴彦文
2017/09/22
0
0
iKcamp新书上市《Koa与Node.js开发实战》

内容摘要 Node.js 10已经进入LTS时代!其应用场景已经从脚手架、辅助前端开发(如SSR、PWA等)扩展到API中间层、代理层及专业的后端开发。Node.js在企业Web开发领域也日渐成熟,无论是在API...

iKcamp
2018/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js如何控制table中的某一行动态置顶

两行代码搞定: $('#'+item.roadCode).fadeOut().fadeIn();//获取到需要置顶的行 $(".table").prepend($('#'+item.roadCode)); 其中,fadeOut()方法 作用 --- 从可见到隐藏 如下: prepend(......

码妞
今天
4
0
四种解决Nginx出现403 forbidden 报错的方法

我是在在本地用虚拟机中通过yum安装nginx的,安装一切正常,但是访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log。打开日志发现报错Permission denied,详细报错如下: 1....

dragon_tech
今天
3
0
获取RestResultResponse返回的值

Springboot项目,需要调其他服务的接口,返回值类型是RestResultResponse 打断点的结果集是这个 打印出来的getData(): [{id=3336b624-8474-4dd9-bd5b-c7358687c877, paraNo=104, para=Postpo...

栾小糖
今天
4
0
【小学】 生成10以内的加减法

#!/usr/bin/env python# coding: utf-8from random import randrange# 题目的最大数值R_MAX = 10# 生成的题目的数量R_PAGE = 70# 生成减法列表def get_sub_list():...

Tensor丨思悟
今天
11
0
JavaScript设计模式——适配器模式

  适配器模式是设计模式行为型模式中的一种模式;   定义:   适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适配器不需要修...

有梦想的咸鱼前端
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部