RIS，建立 React 应用的新选择

前言

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
复制代码

详细目录能够建立项目来体验一下。

高扩展性

高扩展性体如今两方面，一方面是项目的高扩展性和构建的高扩展性。

第一，从建立出来的项目能够看出来，没有对任何使用的技术进行封装，使用的都是业界比较承认的技术，版本能够自主控制，开发者能够自由选择项目的技术栈。

第二，构建上是能够高度定制的，目前是经过灵活合并项目中的配置的方式进行定制，下面主要介绍下如何定制构建配置。

在项目根目录下有个 tools 文件夹，里面有 webpack, server 和 generators 文件夹。下面主要介绍 webpack 和 server 如何配置。

webpack

webpack 文件夹有三个文件 base.js，dev.js 和 prod.js，分别对应基础配置，开发环境和生产环境的配置。

base.js

const path = require('path');

const resolveApp = relativePath => path.join(process.cwd(), relativePath);

module.exports = {
  entry: resolveApp('src/index.js'),
  module: {
    rules: [],
  },
  resolve: {
  },
  plugins: [],
};
复制代码

格式是和官方配置格式是一致的，构建时会对这些配置进行合并。相似这样：

merge([built-in config], merge(base.js, dev.js));
复制代码

server

server 的配置也是同样的，提供官方配置格式，而后进行合并。

module.exports = {
  port: 3000,
  compress: true,
  quiet: false,
  clientLogLevel: 'none',
  disableHostCheck: true,
  historyApiFallback: {
    disableDotRule: true,
  },
  proxy: {
  }
};
复制代码

经过这样的方式，很容易实现添加 loader，plugins，从而很容易把 ant-design 等组件库集成到项目中来，详细可参考用户文档。

极致的开发体验

在开发体验上主要有两个亮点，

第一，开发环境中自动使用了 DLL，使得项目代码的二次编译速度有了质的飞跃。

在开发环境中，自动将全部第三方依赖打入 DLL，和业务逻辑代码进行分离，不参与二次编译，因此开发过程当中构建速度会很是快。

固然，能够自由配置哪些须要打入 DLL，甚至能够禁用此功能，详细参考一下文档。

tools/risrc.js

module.exports = {
  dll: true,
  dllPlugin: {
    path: 'node_modules/ris-react-boilerplate-dlls',
    exclude: [],
    include: [],
    dlls: null,
  },
};
复制代码

第二，提供了 生成器（generators） 功能，能够快速建立组件和页面。

不少时候，咱们新建一个页面或组件，都是经过拷贝的方式，把以前的页面代码拷贝过来删除修改，这样效率很是低并且不可控。

这里咱们能够经过 add 命令根据设置好的模板快速建立组建和页面，

npm run add
复制代码

组件和页面的模板能够在项目中 tools/generators 里进行配置，详细参考文档。

这两块功能的想法来源于 react-boilerplate。

高性能

出于性能上考虑，单页应用庞大起来的时候，bundle 的体积是很大的，因此使用了 react-loadable 对模块进行动态加载。

import Loadable from 'react-loadable';

export default Loadable({
  loader: () => import('./index'),
  loading: () => null,
});
复制代码

详细可参考文档。

强大的数据模拟功能

数据模拟在开发过程当中是很是重要的一环，在服务端没有准备好接口数据的时候，咱们每每须要本身在本地模拟数据，这里我写了个小工具 @ris/mock 来实现这个功能。

只要在项目根目录下的 mock 文件夹配置下 rules.js 文件便可。详细参考文档。

mock/rules.js

module.exports = {
  'GET /api/user': { name: 'beyondxgb' },
  'POST /api/form/create': { success: true },
  'GET /api/cases/list': (req, res) => { res.end(JSON.stringify([{ id: 1, name: 'demo' }])); },
  'GET /api/user/list': 'user/list.json',
  'GET /api/user/create': 'user/create.js',
};
复制代码

高效的数据流处理

在数据流上的处理，没有直接使用 redux，由于使用过都知道，建太多文件太繁琐了，并且没有很好地处理异步数据流，在此以前，dva 提出了 model 的概念，我以为这已是很是好地解决了 redux 的问题，后来出的一些库也离不开 model 的概念，但 dva 或者 mirrorx，它们的定位是大而全的框架，实际上是解决 redux 的问题，却要混着其余东西打包成一个框架，这样显得不纯，这里我本身写了个 xredux，参考了 dva 和 mirrorx 的一些想法，封装出一个库，只是单纯解决 reudx 的问题，不依赖于任何框架，能够看做是 redux 的升级版。

用法上和 dva、mirrorx 差很少，大概以下：

import xredux from 'xredux';
const store = xredux.createStore();
xredux.model({
  namespace: 'app',
  initialState: {
  },
  reducers: {
  },
  effects: {
  },
});
复制代码

很好地把 action、reducers、state 结合到一个 model 里面，在异步请求的处理上也很是地优雅，详细使用可参考文档。

结语

RIS 是我本身工做上的沉淀，开源出来给你们互相学习，但愿能给部分人带来帮助和启发，里面所使用的技术也是我的的主观想法，不喜勿喷。后面会逐渐将本身的一些最佳实践沉淀在这里，也欢迎你们贡献本身的想法。

若是喜欢 RIS 的话，欢迎使用，有问题能够提 issues，也很是欢迎进行共建。

若是不喜欢 RIS 的话，能够好好阅读下源码，作前端构建工具的模式也就是这样子，能够参照本身作一下。

资料

• ris
• create-ris
• xredux