RIS，创建 React 应用的新选择

Good

前言

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-appcd ris-appnpm 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(&#39;path&#39;);const resolveApp = relativePath => path.join(process.cwd(), relativePath);module.exports = {  entry: resolveApp(&#39;src/index.js&#39;),  module: {    rules: [],  },  resolve: {  },  plugins: [],};格式是和官方配置格式是一致的，构建时会对这些配置进行合并。类似这样：
merge([built-in config], merge(base.js, dev.js));server

server 的配置也是一样的，提供官方配置格式，然后进行合并。
module.exports = {  port: 3000,  compress: true,  quiet: false,  clientLogLevel: &#39;none&#39;,  disableHostCheck: true,  historyApiFallback: {    disableDotRule: true,  },  proxy: {  }};通过这样的方式，很容易实现添加 loader，plugins，从而很容易把 ant-design 等组件库集成到项目中来，详细可参考用户文档。
极致的开发体验

在开发体验上主要有两个亮点，
第一，开发环境中自动使用了 DLL，使得项目代码的二次编译速度有了质的飞跃。
在开发环境中，自动将所有第三方依赖打入 DLL，和业务逻辑代码进行分离，不参与二次编译，所以开发过程中构建速度会非常快。
当然，可以自由配置哪些需要打入 DLL，甚至可以禁用此功能，详细参考文档。
tools/risrc.js
module.exports = {  dll: true,  dllPlugin: {    path: &#39;node_modules/ris-react-boilerplate-dlls&#39;,    exclude: [],    include: [],    dlls: null,  },};第二，提供了 生成器（generators） 功能，可以快速创建组件和页面。
很多时候，我们新建一个页面或组件，都是通过拷贝的方式，把之前的页面代码拷贝过来删除修改，这样效率非常低而且不可控。
这里我们可以通过 add 命令根据设置好的模板快速创建组建和页面，
npm run add

组件和页面的模板可以在项目中 tools/generators 里进行配置，详细参考文档。
这两块功能的想法来源于 react-boilerplate。
高性能

出于性能上考虑，单页应用庞大起来的时候，bundle 的体积是很大的，所以使用了 react-loadable 对模块进行动态加载。
import Loadable from &#39;react-loadable&#39;;export default Loadable({  loader: () => import(&#39;./index&#39;),  loading: () => null,});详细可参考文档。
强大的数据模拟功能

数据模拟在开发过程中是非常重要的一环，在服务端没有准备好接口数据的时候，我们往往需要自己在本地模拟数据，这里我写了个小工具 @ris/mock 来实现这个功能。
只要在项目根目录下的 mock 文件夹配置下 rules.js 文件即可。详细参考文档。
mock/rules.js
module.exports = {  &#39;GET /api/user&#39;: { name: &#39;beyondxgb&#39; },  &#39;POST /api/form/create&#39;: { success: true },  &#39;GET /api/cases/list&#39;: (req, res) => { res.end(JSON.stringify([{ id: 1, name: &#39;demo&#39; }])); },  &#39;GET /api/user/list&#39;: &#39;user/list.json&#39;,  &#39;GET /api/user/create&#39;: &#39;user/create.js&#39;,};高效的数据流处理

在数据流上的处理，没有直接使用 redux，因为使用过都知道，建太多文件太繁琐了，而且没有很好地处理异步数据流，在此之前，dva 提出了 model 的概念，我觉得这已经是非常好地解决了 redux 的问题，后来出的一些库也离不开 model 的概念，但 dva 或者 mirrorx，它们的定位是大而全的框架，其实是解决 redux 的问题，却要混着其他东西打包成一个框架，这样显得不纯，这里我自己写了个 xredux，参考了 dva 和 mirrorx 的一些想法，封装出一个库，只是单纯解决 reudx 的问题，不依赖于任何框架，可以看作是 redux 的升级版。
用法上和 dva、mirrorx 差不多，大概如下：
import xredux from &#39;xredux&#39;;const store = xredux.createStore();xredux.model({  namespace: &#39;app&#39;,  initialState: {  },  reducers: {  },  effects: {  },});很好地把 action、reducers、state 结合到一个 model 里面，在异步请求的处理上也非常地优雅，详细使用可参考文档。
结语

RIS 是我自己工作上的沉淀，开源出来给大家互相学习，希望能给部分人带来帮助和启发，里面所使用的技术也是个人的主观想法，不喜勿喷。后面会逐渐将自己的一些最佳实践沉淀在这里，也欢迎大家贡献自己的想法。
如果喜欢 RIS 的话，欢迎使用，有问题可以提 issues，也非常欢迎进行共建。
如果不喜欢 RIS 的话，可以好好阅读下源码，做前端构建工具的模式也就是这样子，可以参照自己做一下。
资料

• ris
  
• create-ris
  
• xredux
  

来源：https://zhuanlan.zhihu.com/p/57281453
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！