Ice飞冰页面配置&菜单配置&日志打印&环境配置《六》

松献

2023-12-01

页面配置

框架为页面级组件提供了一些特殊的配置项，让页面级组件可以快速拥有一些能力。

页面滚动#

scrollToTop：用于渲染页面前是否需要将当前页面滚动至顶部，这个配置用于嵌套路由的应用场景。

const HomePage = () => {
  return (
    // jsx code...
  )
}

HomePage.pageConfig = {
  scrollToTop: true
}

pageConfig可以配置权限

菜单配置

headerMenuConfig 和 asideMenuConfig 两种形式，headerMenuConfig 用于顶部菜单栏的渲染，asideMenuConfig 用于侧边菜单栏的渲染，这样方便在统一的位置管理应用布局的菜单信息：

// 顶部菜单栏配置
export const headerMenuConfig = [
  {
    name: 'Home', // 菜单名称
    path: '/', // 菜单路径
    icon: 'message', // 菜单图标
  },
];
// 侧边菜单栏配置
export const asideMenuConfig = [
  {
    name: 'Dashboard', // 一级菜单名称
    path: '/', // 一级菜单路径
    icon: 'edit', // 一级菜单图标
    // 二级菜单配置
    children: [
      {
        name: 'Analysis', // 二级菜单名称
        path: '/dashboard/analysis', // 二级菜单路径
      },
      {
        name: 'DashboardChild',
        path: '/',
        icon: 'add',
        // 三级菜单配置
        children: [
          {
            name: 'Monitor', // 三级菜单名称
            path: '/dashboard/monitor', // 三级菜单路径
          },
        ],
      },
    ],
  },
  // ...
];

菜单权限#

首先在 src/layouts/BasicLayout/menuConfig.ts 中增加以下的内容：

export const asideMenuConfig = [
  {
    name: 'Home',
    path: '/',
+   auth: ['guest']
  },
];

然后在 src/layouts/BasicLayout/components/PageNav/index.tsx中[配置](菜单配置 | 飞冰 (ice.work))

日志打印

只希望在开发环境中打印日志，在生产环境中则不打印日志，或者设置日志的级别，避免生产环境的调试日志在生产环境中出现

日志分类#

框架日志分为 TRACE、DEBUG、INFO、WARN、ERROR 和 SILENT 6 个级别，分别在不同的场景下使用：

logger.trace(msg)：输出一个堆栈跟踪
logger.debug(msg)：输出一个调试日志
logger.info(msg)：输出一个信息日志
logger.warn(msg)：输出一个警告日志
logger.error(msg)：输出一个错误日志

使用#

import { logger } from 'ice';
logger.info('== info ==');

level#

在某些场景下也可在 src/config.ts 中根据不同环境配置 loglevel:

export default {
  default: {
    loglevel: 'warn'
  },
  production: {
    loglevel: 'error'
  }
}

在 src/app.ts 中将配置的 loglevel 传递给 logger：

import { runApp, config } from 'ice';

// 用于配置
const appConfig = {
  logger: {
    level: config.loglevel
  }
};

runApp(appConfig);

环境配置

icejs 支持区分不同环境，开发者可根据环境区分工程配置以及运行时配置。常见场景：

多套构建环境，每个环境的工程配置不一样
应用运行时的一些配置项需要根据环境切换

通过命令行参数可以设置不同的环境，默认情况下支持 start/build 两个环境，对应的即 icejs start/build 两个命令，开发者可以通过 --mode 参数来扩展环境：

{
  "scripts": {
    "start": "icejs start --mode local",
    "build:daily": "icejs build --mode daily",
    "build": "icejs build --mode prod"
  }
}

区分工程配置#

在定义好环境之后，即可在 build.json 中通过 modeConfig 来根据环境区分配置了：

{
  "alias": {},
  "modeConfig": {
    "daily": {
      "define": {},
      "vendor": false
    },
    "prod": {
      "define": {},
      "vendor": true,
      "plugins": ["build-plugin-esbuild"]
    }
  }
}

同时在本地插件 build.plugin.js 也可以从 context 上获取到当前 mode：（没有用到这个插件）

module.exports = ({ context }) => {
  const { command, commandArgs } = context;
  const mode = commandArgs.mode || command;
};

区分运行时配置#

在定义好环境之后，前端代码中即可通过 APP_MODE 拿到当前环境：

import { APP_MODE } from 'ice';
console.log('APP_MODE', APP_MODE);

当然大多数时候你都不需要关心 APP_MODE 这个变量，只要按照约定的方式区分不同环境的配置即可。在 src/config.ts 中编写不同环境的配置：

// src/config.ts
export default {
  // 默认配置
  default: {
    appId: '123',
    baseURL: '/api',
  },
  local: {
    appId: '456',
  },
  daily: {
    appId: '789',
  },
  prod: {
    appId: '101',
  },
};

配置之后框架会自动根据当前环境将配置进行合并覆盖，开发者只需要在代码中直接使用 config 即可：

import { config } from 'ice';
console.log(config.appId);