自制的React同构脚手架

立即下载用AI写一个

发布时间：2018-03-07

10人 | 浏览：3385次 | 收藏 |

技术：Webpack3.10.0 + React16.2.0 + React Router4.2.0 + React Redu5.0.6 + Sass + NodeJS + Express4.16.2

运行环境：NodeJS8.6.0 + npm5.7.1

概述

React 同构脚手架（内置基础的网站功能，让大家更快上手）

详细

Web前端世界日新月异变化太快，为了让自己跟上节奏不掉队，总结出了自己的一套React脚手架，方便日后新项目可以基于此快速上手开发。

源码: [https://github.com/54sword/react-starter](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](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配置项
```

## 运行效果图
![20180306-1.png](https://img.xiaoduyu.com/20180306-1.png "20180306-1.png")
![20180306-2.png](https://img.xiaoduyu.com/20180306-2.png "20180306-2.png")
![20180306-3.png](https://img.xiaoduyu.com/20180306-3.png "20180306-3.png")

## 部分功能实现思路详解
### 配置路由
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>

<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同构脚手架

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子