项目简介

BFF: Backend For Frontend，即增加一层为前端服务的中间件，可以在这层进行路由控制、接口聚合、跨域等处理。 从零开始搭建BFF架构，会逐步完善成一个企业级的应用，简易的图书管理系统。中间会经历几个阶段，每一个阶段都会记录所完成的功能以及涉及到的知识点。

技术栈

• Koa
• Swig
• Php

项目结构

|-- assets 静态资源 |-- config 配置文件 |-- controllers 路由控制 |-- middlewares 中间件 |-- views swig模板 |-- .babelrc babel配置文件 |-- app.js 应用入口

运行

git clone https://github.com/weiTimes/BFF-Node.git
cd BFF-Node
yarn
yarn start

开始

第一阶段

• 区分环境 NODE_ENV = development | production
• 自动更新代码 nodemon
• 路由 @koa-router
• koa-static 配置静态服务的路径
• koa2-connect-history-api-fallback 让Koa2支持SPA应用，当刷新前端路由时会将其重定向到index.html，保证刷新后仍然可以正常访问
• 页面路由解析过程 /about -> 后端 /about -> 404 -> Fallback中间件 -> 后端 / -> views/index.html -> /about被vue-router拦截到 -> /about
• es6 module以及system.js babel => data.js yarn add @babel/core @babel/core @babel/plugin-transform-modules-systemjs
• 如果不支持nomodule(safari) https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc

 (function() {
 var check = document.createElement('script');
 if (!('noModule' in check) && 'onbeforeload' in check) {
   var support = false;
   document.addEventListener('beforeload', function(e) {
     if (e.target === check) {
       support = true;
     } else if (!e.target.hasAttribute('nomodule') || !support) {
       return;
     }
     e.preventDefault();
   }, true);

   check.type = 'module';
   check.src = '.';
   document.head.appendChild(check);
   check.remove();
 }
}());

• 跨域的解决方案 跨域：协议、域名、端口不同

1. cors 让后端支持跨域
2. nodejs 代理，后端请求是不存在跨域的
3. nginx
4. 二级域名的话，可以设置document.domain改成一级域名
5. webSocket 在传输层请求，避免跨域
6. postMessage 设置允许跨域

script、img、link由于浏览器的白名单机制，不会跨域

第二阶段

1. 完善MVC

• 完善models
• 完善tests

2. 完善工程化
   • 错误处理-记录错误日志 log4js
   • 模块化改造 commonjs => es6 import export @babel/node 编译时转码 @babel/preset-env

// .babelrc
"presets": ["@babel/preset-env"]
// package.json -> scripts
"start": "NODE_ENV=development nodemon -exec 'babel-node ./app.js'"

• 格式化后端返回的数据

3. 函数式编程库的编写

• underscore/lodash
• 节流函数

4. 测试 e2e -> rize + puppeteer mocha/supertest/chai -> node接口测试 s

第三阶段

• 优化npm script scripts package.json中的scripts对应scripty文件夹
• 代码重复率检查 jscpd

yarn run jscpd

# 在reporter中查看

• 项目结构改造 src/server src/web
• 安装webpack yarn add webpack webpack-cli

第四阶段

目标：实现一个webpack插件，将webpack打包出来注入的css、js插入到正确的位置

• 插件实现：利用webpack的钩子函数
• gulp打包node项目 gulp-babel 转译

  nodejs 热更新 gulp-watch 监听到变化重新打包 yarn run test 启动服务，监听到变化重启服务

• tree shaking

1. gulp-rollup 清除无用的代码
2. @rollup/plugin-replace 去掉判断开发环境的代码

• webpack环境配置

1. hash
2. sourcemap映射 - 打包前 => 打包后，便于调试
3. 压缩html, css
4. webpack-bundle-analyzer 打包资源分析
5. webpack-build-notifier 打包完成会提示
6. 热重载