# `@cisdi/pangu`

> pangu devtools for ui engine

## 用法

- 安装

  ```bash
  npm i @cisdi/pangu --dev
  # 查看帮助
  pangu --help
  ```

- 本地开发

  ```bash
  pangu dev
  # 查看帮助
  pangu dev --help
  ```

- 打包

  ```bash
  pangu build
  # 查看帮助
  pangu build --help
  ```

## 自定义 `Webpack` 配置

支持两种方式自定义 `Webpack` 配置

- 函数式

  ```js
  // webpack.config.js
  module.exports = function(config) {
    // 修改配置
    return config
  }
  ```

其中 `config` 为现有配置

- 对象式

  ```js
  // webpack.config.js
  module.exports = {
    // 你的配置
  }
  ```

  此种方式修改的配置将会被使用 [`webpack-merge`](https://github.com/survivejs/webpack-merge) 合并

## 应用配置

根目录下放置 `app.json` 来配置应用，目前支持以下配置

```json
{
  "appName": "应用名"
}
```

### 字段说明

- `appName`: `document.title` 以及 `process.env.APP_NAME`

## 主题配置

根目录放置 `theme.json` 来配置主题，其原理是根据配置通过 `less` 的 `modifyVars` 实现

- 支持通过 `extends` 继承配置
- 支持所有 `Ant Design` 主题配置

```json
{
  "extends": "@ant-design/dark-theme",
  "primary-color": "#1890ff"
}
```

## 环境变量

### 编译时

- `process.env.NODE_ENV`: `Node` 环境: `development`/`production`
- `process.env.PORT`: 本地开发运行端口
- `process.env.HOST`: 本地开发运行地址

### 运行时

- `process.env.APP_NAME`: 应用名
- `process.env.APP_ENV`: `APP` 环境: `development===0`/`test===1`/`preproduction===2`/`production===3`
- `process.env.NODE_ENV`: `Node` 环境: `development`/`production`

## Mock Server

> 基于 [`json-server`](https://github.com/typicode/json-server)

在根目录下创建 `mocks/db.json` 文件，参考 `json-server` 配置