自制的React同构脚手架
Web前端世界日新月异变化太快，为了让自己跟上节奏不掉队，总结出了自己的一套React脚手架，方便日后新项目可以基于此快速上手开发。
源码: https://github.com/54sword/react-starter
特点
- 服务端渲染，完美解决SEO问题
- 按页面将代码分片，然后按需加载
- 支持 CSS Modules，避免CSS全局污染
- 支持流行UI框架 Bootstrap 4
- 开发环境支持热更新
- 内置登录、退出、页面权限控制、帖子列表获取、帖子详情获取等功能
- 内置用户访问页面时，301、404 状态相应的处理逻辑
需求配置
node ^8.6.0
npm ^5.7.1
没有在windows机器上测试过，可能会报错
开始
$ git clone git@github.com:54sword/react-starter.git
$ cd react-starter
$ npm install
$ npm run dev
浏览器打开 http://localhost:4000
相关命令说明
开发环境
注意：开发环境下，代码不分片，生产环境下才会分片
npm run dev
生产环境测试
npm run dist
npm run server
部署到服务器
1、修改 config/index.js 中的 public_path 配置
2、打包文件，除了index.ejs是服务端渲染的模版文件，其他都是客户端使用的文件
npm run dist
3、将项目上传至你的服务器
4、启动服务
Node 启动服务
NODE_ENV=production __NODE__=true BABEL_ENV=server node src/server
或使用 pm2 启动服务
NODE_ENV=production __NODE__=true BABEL_ENV=server pm2 start src/server --name "react-starter" --max-memory-restart 400M
目录结构
.
├── config # 项目配置文件
├── dist # 所有打包文件储存在这里
├── src # 程序源文件
│ ├── actions # redux actions
│ ├── client # 客户端入口
│ ├── common # 全局可复用的容器组件
│ ├── components # 全局可复用的容器组件
│ ├── pages # 页面组件
│ ├── reducers # redux reducers
│ ├── router # 路由配置
│ ├── server # 服务端入口
│ ├── store # redux store
│ └── view # html模版文件
├── .babelrc # 程序源文件
├── webpack.development.config.js # 开发环境的webpack配置项
└── webpack.profuction.config.js # 生产环境的wbepakc配置项
运行效果图
部分功能实现思路详解
配置路由
src/router/index.js 为路由配置文件，如下代码是一个路由项的配置说明
{
// 路径
path: '/',
// 如果为true，则只有在路径完全匹配location.pathname时才匹配
exact: true,
// 页面头部组件
head: Head,
/**
* 内容组件（页面主要内容）
* generateAsyncRouteComponent 为生成一个异步加载组件，
* 客户端打包的时候 ../pages/home，会将该组件单独打包成一个js文件，用于在客户端按需加载。
*/
component: generateAsyncRouteComponent({
loader: () => import('../pages/home')
}),
/**
* 进入该页面的触发事件
* requireAuth 为需要登录才能访问
* requireTourists 只有游客可以访问
* triggerEnter 进入事件，可以用作任何人都可以访问
*/
enter: requireAuth
}
页面组件详细
src/pages/ 为页面组件，实现具体的页面内容，以首页为例的说明 ./src/pages/home/index.js
import React from 'react';
import PropTypes from 'prop-types';
// 加载帖子列表的方法
import { loadPostsList } from '../../actions/posts';
// http://blog.csdn.net/ISaiSai/article/details/78094556
import { withRouter } from 'react-router-dom';
// 壳组件，给页面组件套一个壳组件，方便给所有页面增加额外功能和属性
import Shell from '../../components/shell';
// 生成页面Meta，如标题、描述、关键词
import Meta from '../../components/meta';
// 帖子列表组件
import PostsList from '../../components/posts/list';
export class Home extends React.Component {
// 服务端渲染
// 加载需要在服务端渲染的数据
static loadData({ store, match }) {
return new Promise(async function (resolve, reject) {
/**
* 这里的 loadPostsList 方法，是在服务端加载 posts 数据，储存到 redux 中。
* 这里对应的组件是 PostsList，PostsList组件里面也有 loadPostsList 方法，但它是在客户端执行。
* 然后，服务端在渲染 PostsList 组件的时候，我们会先判断如果redux中，是否存在该条数据，如果存在，直接拿该数据渲染
*/
await loadPostsList({
id: 'home',
filter: {
sort_by: "create_at",
deleted: false,
weaken: false
}
})(store.dispatch, store.getState);
resolve({ code:200 });
})
}
constructor(props) {
super(props);
}
render() {
return(<div>
<Meta title="首页" />
<PostsList
id={'home'}
filter={{
sort_by: "create_at",
deleted: false,
weaken: false
}}
/>
</div>)
}
}
Home = withRouter(Home);
export default Shell(Home);
服务端渲染
import path from 'path';
import express from 'express';
import bodyParser from 'body-parser';
import cookieParser from 'cookie-parser';
import compress from 'compression';
// 服务端渲染依赖
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter, matchPath } from 'react-router';
import { Provider } from 'react-redux';
import DocumentMeta from 'react-document-meta';
// 路由配置
import configureStore from '../store';
// 路由组件
import createRouter from '../router';
// 路由初始化的redux内容
import { initialStateJSON } from '../reducers';
import { saveAccessToken, saveUserInfo } from '../actions/user';
// 配置
import { port, auth_cookie_name } from '../../config';
import sign from './sign';
import webpackHotMiddleware from './webpack-hot-middleware';
const app = express();
// ***** 注意 *****
// 不要改变如下代码执行位置，否则热更新会失效
// 开发环境开启修改代码后热更新
if (process.env.NODE_ENV === 'development') webpackHotMiddleware(app);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(compress());
app.use(express.static(__dirname + '/../../dist'));
// 登录、退出
app.use('/sign', sign());
app.get('*', async (req, res) => {
// 创建 store
const store = configureStore(JSON.parse(initialStateJSON));
let user = null;
let accessToken = req.cookies[auth_cookie_name] || '';
// 验证 token 是否有效
if (accessToken) {
// 这里可以去查询 accessToken 是否有效
// your code
// 这里假设如果有 accessToken ，那么就是登录用户，将他保存到redux中
user = { id: '001', nickname: accessToken };
// 储存用户信息
store.dispatch(saveUserInfo({ userinfo: user }));
// 储存access token
store.dispatch(saveAccessToken({ accessToken }));
}
// 创建路由，返回 list 、dom
// list 是路由的配置列表，dom render的dom
const router = createRouter(user);
const _Router = router.dom;
let _route = null,
_match = null;
// 从路由配置列表中，找到对应的路由
router.list.some(route => {
let match = matchPath(req.url.split('?')[0], route);
if (match && match.path) {
_route = route;
_match = match;
return true;
}
})
/**
* 加载异步组件，并在异步组件中执行 loadData，loadData 加载的数据，储存到redux store中
*/
const context = await _route.component.load({ store, match: _match });
// 渲染页面
let html = ReactDOMServer.renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={context}>
<_Router />
</StaticRouter>
</Provider>
);
// 将redux state 转换成 json 储存到页面中
let reduxState = JSON.stringify(store.getState()).replace(/</g, '\\x3c');
// 获取页面的meta，嵌套到模版中
// 给客户端 initState
let meta = DocumentMeta.renderAsHTML();
if (context.code == 301) {
res.writeHead(301, {
Location: context.url
});
} else {
res.status(context.code);
res.render('../dist/index.ejs', { html, reduxState, meta });
}
res.end();
});
app.listen(port);
console.log('server started on port ' + port);
自制的React同构脚手架
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权
