@pandolajs/pandora-boilerplate-react

1.2.2 • Public • Published

pandora-boilerplate-react

React SPA project boilerplate for pandolajs.

Feature

  • [x] viewport layout. found more details here
  • [x] React 16.5 +
  • [x] Redux
  • [x] eslint
  • [x] Less
  • [x] local mock
  • [x] universal router. found more details here

初始化项目

全局安装 pandora-cli 构建工具

  npm i -g pandora-cli

安装项目依赖

  npm i

启动开发环境

  pa start

构建生产(prod) | 预发(pre) | 测试环境(test) 代码

  pa build --env prod

开发指南

目录结构介绍

  .
  ├── mock                    // mock 数据目录
  └── src
      ├── common              // 通用目录
      ├── components          // 组件目录
      ├── pages               // 页面目录
      ├── routes              // 前端路由目录
      └── services            // 接口封装目录

开发规范

  • 视图组件位于 components 目录中,可复用,数据只能通过 props 进行传入,一般在 pages 中使用,不可在 routes 中直接引用这类型组件

  • 容器组件位于 pages 目录中,通常在 routes 中使用, 禁止在容器组件中直接调用 services 接口

  • serveices 后端接口封装层,所有与后端接口交互的逻辑均在此目录中进行封装,完成数据组装,格式化后,在 routes 层进行数据与组件的组装

  • routes 用来定义页面路由,完成数据层与视图层的组装

  • mock 用来定义后端接口 mock 数据

routes 定义

每个路由都是一个如下格式的对象

  {
    path: '/home/:name',
    action (context, params) {
      return {
        title: 'page title',
        component: (<Page someprops={...} />)
      }
    }
  }

Note: more details read here

mock 定义

没有后端接口定义一个 mock 文件,格式如下:

  {
    path: 'get::/backend/mock/api',
    action (context) {
      return {
        key: 'the data you want to define'
      }
    }
  }

定义好 mock 数据就可以在 services 中,通过 fetch('/backend/mock/api', { ...some params }) 方法来获取 mock 数据

如果同一个项目中的不同接口请求的域名不一样,需要可能直接使用线上 mock server 则可以在 config/app.yaml 中配置 host 和 proxy, 详见如下讲解。

others

  • 目前项目中存在一个全局变量 _DEV_ 用来表示是否为开发环境,如果未开发环境 _DEV_true, 否则为 false

  • 如果项目在 config/app.yaml 中配置了 baseUrl 为 open, 则所有在 routes 中定义的路由均需加此前缀才能访问,有如下路由定义:

  {
    path: '/',
    action () {
      // some code
    }
  }

在项目启动后,需要在浏览器中通过 http://localhost:8080/open 才能访问到, 同时,通过 history.push 或者 history.replace 进行路由跳转的时候,也不需要添加该前缀,直接 history.push('/') 即可跳转到 /open 下。

config/app.yaml 配置详解

app.yaml 中可以添加任意自定义配置字段,内置字段如下:

  • name: 项目名

  • baseUrl: 项目启动后的 path 前缀,比如项目下的所有页面都位于 /test/ 此目录下,则可以配置 '/test', 否则直接配置 '' 即可

  • development / test / preproduction / production: 该字段下的配置为对应环境下的配置,如配置如下字段:

development:
  host: 'a'
test:
  host: 'b'
preproduction:
  host: 'c'
production:
  host: 'd'

当已开发环境启动时,将构建为如下结果:

{
  host: 'a'
}

其他环境以此类推,所以在项目中使用时,直接应用 host 即可,不需要修改源码来适配环境的切换,bug 更少

  • host: 可以是一个数组,也可以是一个字符串

当项目中的所有接口都在同一个域名下,直接提供一个字符串即可,如果接口请求的与页面的域名一致,则直接设置 '/' 或者 ''

如果当前项目下不同接口请求的域名不一样(跨域自行解决), 则可以提供一个数组:

形式如下:

  - <regStr>: <host>

其中 <regStr> 为对应接口的正则字符串,<host> 为对应的域名

  • proxy: 仅需在 development 下配置,用来配置 dev-server 的代理,用来将对应的接口代理到其他服务器下,比如:我需要 a 接口请求某 mock 服务器而非本地 mock server

Package Sidebar

Install

npm i @pandolajs/pandora-boilerplate-react

Weekly Downloads

0

Version

1.2.2

License

MIT

Unpacked Size

49.6 kB

Total Files

43

Last publish

Collaborators

  • cherrylong
  • sizhao