ykit + react(16) + react-router(v4) ssr 插件
可以利用该插件初始化项目，在一个空的目录下执行：
ykit init ssr会在当前目录下生成一个初始工程。然后启动项目：
ykit start访问 http://localhost:3000/ 即可。
代码主要分为两部分
首先业务需要提供一个 index.js 来配置页面，一个简单的示例：
import 'babel-polyfill';
// 引入页面
import Home from './home';
import Detail from './detail';
// 引入 axios 来获取数据
import axios from 'axios';
// 需要实现一个 getPages 方法来配置页面
export function getPages() {
return [
{
path: '/', // 路径规则
component: Home, // 页面组件
exact: true, // 同 react-router <Route> 的 exact 属性
getProps: async() => { // 可在这里获取页面需要的数据
const { data: posts } = await axios.get(
'http://yapi.demo.qunar.com/mock/818/tvmaze/list'
);
return { posts };
}
}, {
path: '/detail/:id',
component: Detail
}
];
}通过 index.js 封装了页面的各项配置，业务不需要再自己配置 router，只用编写页面组件并从 index.js 引入即可。
业务不需要关心里面有什么，也不需要管理和维护它，由工具自动生成。如果有特殊需求也可以去进行改动。
这样一来，业务不用关心服务端代码，以及 web 和 hy 如何适配，只要根据页面编写业务逻辑即可。同时还可以配置 getProps 来获取初始属性（页面数据等），框架可以智能地提前加载数据来渲染页面（由框架决定是在服务端还是客户端获取数据）。
通过引入 ssr 目录下封装的 link 组件(TODO: 这里需要封装到工具里，而不是从路径引)，即可实现页面跳转，使用方法同 react-router v4 中的 <Link>。
import Link from '../ssr/share/link';
const Home = (props) => {
return (
<div>
<h1>Home Page</h1>
<Link to={`/detail`}>
<p>点击我可以跳转到详情页</p>
</Link>
</div>
)
}首先构建前端资源：
ykit pack -m
然后可以直接使用 pm2 等进行部署，如：
NODE_ENV=production pm2 start ssr/bin/start