# react-umijs-devextreme

**Repository Path**: mudking/react-umijs-devextreme

## Basic Information

- **Project Name**: react-umijs-devextreme
- **Description**: 为公司项目搭建的脚手架环境.使用基于React技术栈的Umijs3进行开发,使用devextreme作为UI组件框架.
umijs的约定式路由,以及对dvajs的集成大大提高开发效率.
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/mudking/react-umijs-devextreme
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 3
- **Created**: 2020-10-07
- **Last Updated**: 2022-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vskysoft-boilerplate.

基于ReactJS, devExtreme组件库 开发.
[https://gitee.com/mudking/react-umijs-devextreme](https://gitee.com/mudking/react-umijs-devextreme.git)

## Getting Started

* 安装tyarn

``` bash
npm install -g tyarn
```

* 安装项目依赖.

``` bash
tyarn
```

[使用方法](https://yarn.bootcss.com/docs/usage/)

* 启动: npm start
* 打包: npm run build

注意: 至少要启动一次, 才可以执行打包. 否则会因为一些所需的文件缺少而失败.

## 开发

### 增加一个页面

* src/pages下建立一个目录pageA, 放置index.jsx和index.less.
* 去src/configs/menus.ts中添加对应的菜单.
* 去pageA目录下开发UI
* pageA目录下增加一个service.ts, 封装对后台API接口的请求. 用到的uri前缀, 建议放到src/configs/configs.ts目录下.

## 部署

* 关闭mock(默认是关闭的)
* 检查src/configs/configs.ts中的地址是否添加到/public/configs.js中.
* npm run build 打包
* 将dist目录下的文件部署到目标服务器.

## 环境变量

https://www.jianshu.com/p/328b79e262f7
process.env. NODE_ENV本来是只能在nodejs环境下访问的. 在浏览器端不能使用.
但webpack在打包时, 通过扩展 webpack. DefinePlugin 可以注入变量，在打包期间将process.env. NODE_ENV替换为相应的常量, 这样浏览器上运行的就不是NODEJS而是纯js.
umijs默认配置了此功能.
因此执行npm start时, process.env. NODE_ENV是'development', 
npm run build时, 是'production'
npm run test时, 是'test'

``` js
new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development')
})
```

利用这个特性, 代码中可以在需要的地方使用process.env. NODE_ENV进行判断, 并使用不同的代码. 如: 数据库连接, 后台接口url等.
打包时, process.env. NODE_ENV会被替换成对应的常量.