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