generator-shopee-react v1.0.4

react-project

模板使用

```
npm install -g yo
npm install -g generator-shopee-react

mkdir shopee-react-example
cd shopee-react-example

yo shopee-react

```

项目业务相关

• 项目说明
  • 该脚手架适用于Shopee内部React技术栈项目的创建

  • 技术特性

    • typescript + react + redux + saga (基于 create react app)
    • SPA
    • 多语言支持
    • 简单的 Skeleton Screen
    • JSON Schema
    • Mock
    • Sentry上报 （需要配置dsn)
    • 内置调试工具（基于eruda）
    • 支持多环境配置
    • 自定义TSLint
    • TSLint效验
    • CommitLint效验

• 依赖项目

  • 目前使用到几个简单方法，依赖@airpay-sz/util

  项目技术相关

• 环境设置

  • APP_ENV=test 项目读取config/config.env.test.ts中配置
  • APP_ENV=mock 项目读取config/config.env.test.ts中配置， 如果mock中有定义一些mock接口，并且mock接口在mock/index.js中有注册，则项目使用到相应接口将会取对应mock数据
  • APP_ENV=uat 项目读取config/config.env.uat.ts中配置
  • APP_ENV=live 项目读取config/config.env.live.ts中配置

• 使用

  // 安装依赖  
  yarn add
  // 浏览器访问 http://localhost:3000/index
  // 该模式为热更新开发模式
  yarn start
  // 开发模式使用mock数据
  yarn mock
  
  // 构建对应环境(test,uat,live)包
  yarn build:xxx

• 命令说明

  yarn start // 开发调度环境
  yarn build:test // 构建测试环境
  yarn build:uat // 构建UAT环境
  yarn build:live // 构建线上环境
  yarn lint  // 语法手动检测
  yarn lang:export  // 将各个组件中的语言信息导出成默认语言包到`src/locale/en.json`文件, 
                    // 然后把该语言包上传到[transify](http://transify.beetalkmobile.com/me), 供local团队翻译
  yarn typestoschema // 手动将`types`目录下的类型文件转换成对应的json schema
  yarn tcm // 手动生成样式对应的类型声明文件

• 项目主要目录说明

  return-refund-h5/
  ├─ lib/               // 自定义tslint rule规则
  ├─ public/            // 页面模版
  ├─ src/               // 源代码
  │  ├─ components      // 组件相关，其中页面也作为一个组件放在该目录下
  │  ├─ stores          // store相关，包括action, reducer, saga和service
  │  ├─ loader          // 骨架屏相关
  │  ├─ types           // 类型定义
  │  ├─ schema          // API返回json schema定义
  │  ├─ page            // 路由页面组件
  │  ├─ utilites        // 业务相关util
  │  ├─ mod             // 一些其它模块，主要包括对第三方库的封装模块
  │  ├─ locale          // 多语言对应的语言包
  │  ├─ mock            // mock 数据模板定义
  │  ├─ const           // 枚举，常量定义
  │  ├─ config          // 项目不同环境的配置文件
  │  ├─ assets          // 静态资源，主要是图标
  ├─ demo/              // UX相关
  ├─ index.tsx          // 项目入口文件
  ├─ App.tsx            // 该应用主要文件，包括路由，saga配置
  ├─ package.json
  ├─ tsconfig.json
  ├─ tsconfig.prod.json
  └─ tslint.json

• 项目配置相关

  • 项目配置所在目录 src/config
  • 不同环境使用webpack loader加载不同配置文件

  {
    default_language: 'en', // 默认语言
    debug: {
      prefix: 'app.demo', // log方法打印日志的前缀
      // 前端调试工具
      devTools: 'https://cdnjs.cloudflare.com/ajax/libs/eruda/1.5.4/eruda.min.js'
    },
    // api配置相关
    api: {
      // api uri
      uri: 'https://your.domain',
      // 超时配置（second)
      timeout_s: 10,
      // 超时后重试次数
      retry_count: 1,
      // 重试次数
      retry_delay_s: 1
    },
    ui: {
      toast_delay_s: 3 // 每个toast展示时间
    },
    // https://github.com/yahoo/react-intl/wiki/Components#formatteddate
    // customDateFormat 如果不使用react-intl的默认多语言格式，则通过该配置控制
    // 格式如下(如：yyyy/MM/dd HH:mm), 建议在语言包中配置该配置，可以做到不同语言自定义格式
    date_time_format_options: {
      localeMatcher: 'best fit',
      formatMatcher: 'basic',
      hour12  : true,
      year        : 'numeric',
      month       : '2-digit',
      day         : '2-digit',
      hour        : '2-digit',
      minute      : '2-digit',
      second      : '2-digit'
    },
    currency_format_options: {
      currency: 'IDR' // currency
    },
    // sentry js上报dsn配置
    sentry_dsn: 'https://b0b8e669f2554f02976fba33cc3fe961@sentry.lenteradana.co.id/xx'
  };

• 项目相关优化记录