react 多页面开发模式

      最近在开发两个CRM项目，像这种CRM其实很多组件都是可以公用的，比如封装的表格、表单、布局、封装的请求等等。如果分开两种情况来做的话，那相当于增加了double的工作量，作为一个21世纪的佛系猿来说: “不会偷懒的程序猿不是好程序猿（褒义）”，所以就想到了多页面来开发，好处当然是多多啦，共用公共组件，相互之间完全解耦，想想都有点小激动。

项目地址，感兴趣的可以拉下来看看。

如果只是想看多页面是怎么配置的，可以查看我的另外一篇文章 create-react-app 多页面配置

下面挑一些重点的来说下:

entrances

每一个文件代表着一个入口(应用)， 没什么好说的，代码就像单页面的入口文件一样，每添加多一个入口文件，需要重启才能有效果。
访问每个应用直接入口文件的名称加上.html

如:

http://localhost:3000/portal.html

views(核心)

基本上都围绕这个“业务层来去展开的”，我把他设计层2层，第一层是应用层，第二层是模块层，每个模块下面的根目录都可以有 api.js router.js mock.js 一定是在模块的根目录才有效果

这3个文件的作用分别是:

api.js： 该模块下的API请求接口

router.js： 该模块下的路由表

mock.js： 该模块下的Mock数据

以上3个文件名称是不能更改的，它们分别对应 src/services src/routers src/mocks 文件夹

services(api的中央机构)

每个文件对应入口文件，遍历该应用模块下的所有 api.js 文件

mocks(mock的中央机构)

每个文件对应入口文件，遍历该应用模块下的所有 mock.js 文件

routers(router表的中央机构)

每个文件对应入口文件，遍历该应用模块下的所有 router.js 文件

components

整个项目的公共组件， 这里的组件应该是不涉及到业务逻辑的。

layouts

整个项目的布局（主题）组件， 它也可以归纳到公共组件去，但是我把它单独出来了。

build(打包的程序)

每一个文件夹都代表着一个程序，每次打包只能打包一个程序，打包命令如下:

set BUILD_ENV=portal&& node scripts/build.js

但是我们是不是可以写在 package.json的script写一个命令呢，机智如我[\嘿嘿]

{
   "build": "set BUILD_ENV=portal&& node scripts/build.js && set BUILD_ENV=user&& node scripts/build.js"
}

这样子就可以运行,就会依次打包portal、user

   npm run build

以上是对这个框架的一个简单的介绍，详细的可以把代码拉下来看看，只要有点基础的人，应该都能看的懂这个吧。如果觉得有用，或者有更好的实践的话，可以贡献下你的代码。