前后端项目混合应用开发

[Sukiey]

本项目是一个前后端混合的项目。

技术栈

前端技术栈：umijs、react、dva、umi-request
后端技术栈：koa、koa-static、koa-nunjucks-2
工具插件：concurrently、nodemon

目录结构

webapp
│   README.md
│   Dockerfile
│   package.json  
│
└───client
│   │   tsconfig.json
│   │   .eslintrc.js
│   │
│   └───config
│   │    │   config.ts
│   │    │   ...
│   └───src
│        │   app.tsx
│        └───assets
│        └───components
│        └───models
│        └───pages
│   
└───server
    │    server.ts
    │    tsconfig.json
    │    .eslintrc.js
    └───controller
         │    home.ts
    └───service
    └───middles
    └───models
    └───router
    └───view
         │    index.html

混合开发策略

• 前端负责打包生成资源文件，.js，.css等
• 后端负责渲染模板html，加载前端生成的资源文件

修改前端项目开发模式下的打包策略

默认情况下，umijs会将资源文件拆包，以实现动态引入，这在混合app里不太友好，在html模板中无法引入全部的资源文件，我们需要改变umijs开发模式下的打包方式，让所有的资源只生成一个*.js文件和*.css文件。

做法也比较简单，只要将dynamicImport在开发模式下禁掉就行，配置修改如下图：

后端负责渲染模板文件

• 在模板文件中，加载前端生成的资源文件
  

图中的资源文件，以 dev-server 服务地址的方式引入。

• 使用koa-nunjucks-2模板引擎渲染模板

// home controller
export default {
  index: async(ctx, next) => {
    await ctx.render('index');
  }
}

// router
import Router = require('koa-router');
import HomeCtrl from '../controller/home';
import UserCtrl from '../controller/user';

const router = new Router();

export default (app) => {
  router.get('/api/currentUser', UserCtrl.current);
  router.all('(.*)', HomeCtrl.index); // 设置通配符路由
  app.use(router.routes());
};

// server.ts

import Koa = require('koa');
import router from './router';

const path = require('path');
const koaNunjucks  = require('koa-nunjucks-2');

const serve = require('koa-static');


const app = new Koa();

const staticPath = path.join(__dirname, 'views');
app.use(koaNunjucks({
  ext: 'html',
  path: staticPath,
  nunjucksConfig: {
    noCache: true
  }
}))

app.use(serve(staticPath))

router(app);

app.listen(3000, ()=> {
  console.log(`Server running on  http://localhost:3000`);
});