前言

 

RIS, React Integrated Solution. 它的目标是提供一套基本的构建配置方案，而且配置是能高度扩展的，希望通过它能对外输出 React 的一些最佳实践。

 

RIS 是我在去年11月开始开源出去的，这工具之前在内部团队使用过，反馈还不错，断断续续维护和写文档，现在介绍给大家，希望能给大家提供一些帮助和启发。

 

背景

 

目前社区已经有很多优秀的工具或框架做前端构建的事情，而且集成了相关的最佳实践，比如 create-react-app，react-boilerplate，umi 等等，这三个我都觉得做得很不错，我做 RIS 的时候很多想法都来源于它们。那为啥我还要重复造轮子？轮子不怕造，最重要是能说服自己，我觉得自己可以做出跟别人不一样甚至有创新的东西出来，其次，在造的过程中，也是自己对于前端构建一些思考的沉淀。

 

在这说下自己的一些想法：

 

create-react-app: 它的构建和开发体验我觉得是做得最好的，也得到了社区的认可，但我觉得唯一缺乏的是扩展比较麻烦，受限于里面内置的构建，当然有人说可以使用 enject 的方式，但这样又失去了工具的意义了。

 

react-boilerplate：它的亮点主要是集成了一些最佳实践，基本包含了项目开发中所需的技术，但只是一个工程，没有工具化。

 

umi：它是支付宝做的企业级应用框架，可以通过插件集成相关的功能，约束比较强，自主权很小。

 

RIS 要做到的是更像是 create-react-app 的方式，提供最底层的构建，同时提供通用的一些开发方案， 再给予开发者足够的自由定制自己想要的，希望通过这个工具输出 React 开发的最佳实践。

 

快速体验

 

npx create-ris ris-app

 

cd ris-app

 

npm start

 

npm 的版本需要是 5.2 及以上

 

详细可参考文档。

 

特性

 

主要的特性：

 

✔ 开箱即用，内置了空白模板和标准模板，集成 react, react-outer 等。

 

✔︎ 高扩展性，可以高度定制项目内容和构建配置。

 

✔︎ 极致的开发体验，使用了 DLL 加快构建速度，可以使用命令快速新建组件和页面。

 

✔︎ 高性能，使用了 react-loadable 实现代码的按需加载。

 

✔︎ 强大的数据模拟功能, 很方便地在开发环境模拟数据。

 

✔︎ 高效的数据流处理，集成了 xredux，很好地处理数据流问题。

 

开箱即用

 

使用 create-ris 可快速创建脚手架，目前集成了 空白模板 和 标准模板。

 

npx create-ris <appName>

 

空白模板（simple)

 

创建出来的项目和 create-react-app 创建的差不多，只是一个空白项目。

 

├── README.md

 

├── package.json

 

├── src

 

│   ├── App.js

 

│   ├── App.scss

 

│   ├── index.html

 

│   └── index.js

 

└── tools

 

    ├── generators

 

    │   ├── component

 

    │   │   ├── class.js.hbs

 

    │   │   ├── index.js

 

    │   │   └── stateless.js.hbs

 

    │   ├── index.js

 

    │   └── utils

 

    │       └── componentExists.js

 

    ├── risrc.js

 

    ├── server

 

    │   └── index.js

 

    └── webpack

 

        ├── base.js

 

        ├── dev.js

 

        └── prod.js

 

标准模板（standard）

 

主要集成了 react-router, react-redux, xredux，react-loadable 等库，主要提供单页应用的标准解决方案。

 

├── README.md

 

├── mock

 

│   └── rules.js

 

├── package.json

 

├── src

 

│   ├── assets

 

│   ├── components

 

│   ├── core

 

│   │   └── request

 

│   ├── index.html

 

│   ├── index.js

 

│   ├── pages

 

│   │   ├── Demo

 

│   │   │   ├── Loadable.js

 

│   │   │   ├── index.js

 

│   │   │   ├── index.scss

 

│   │   │   └── model.js

 

│   ├── routes.js

 

│   ├── services

 

│   ├── store

 

│   └── utils

 

└── tools

 

详细目录可以创建项目来体验一下。