# 应用入口 | 使用 Tango 构建你的低代码生产力工具
框架通过 runApp 创建渲染整个应用，在创建应用时可以传入应用的全局配置。

跳到主要内容
🏗 当前版本为 alpha 版本，相关文档正在编写之中，敬请期待！

# 应用入口

框架通过 `runApp` 创建渲染整个应用，在创建应用时可以传入应用的全局配置。

## 基本配置​

通过 `src/index.js` 对应用进行全局配置，设置路由、运行时环境、服务函数、状态模型等。

    import { runApp, tangoBootConfig } from '@music163/tango-boot';
    import { message } from '@music163/antd';

    // 配置请求错误发生时消息默认的展现方式，此处使用 message 组件进行消息浮层的展示
    tangoBootConfig.toast = message;

    runApp({
      // 启动项配置
      boot: {},

      // 应用容器注入
      providers: [],

      // 状态模型
      stores: {},

      // 服务函数
      services: {},

      // 路由配置
      router: {},
    });

## 启动项配置​

`boot` 配置项用于应用的启动项配置：

    runApp({
      boot: {
        // 应用挂载的 dom 结点
        mountElement: document.querySelector('#root'),

        // 是否开启 qiankun，如开启则对应为 `qiankun: { appName: string }`
        qiankun: false,
      },
    });

## 路由配置​

`router` 配置项用于配置应用的前端路由，底层基于 `react-router` 实现：

    import routes from './routes';

    runApp({
      router: {
        // 路由类型: hash | browser
        type: 'hash',

        // 路由配置信息
        config: routes,

        // basename,
      },
    });

TangoBoot 使用的是 ReactRouter 的静态路由配置方案。具体的路由配置文件如下：

    // routes.js
    import Index from './pages/index';
    import About from './pages/about';

    const routes = [
      {
        path: '/',
        exact: true,
        component: Index,
      },
      {
        path: '/about',
        component: About,
      },
      {
        path: '/user/:id',
        component: About,
      },
    ];

    export default routes;

## 应用容器配置​

由于 `runApp` 封装了根组件的渲染逻辑，某些时候，你可能想要为根组件包裹特定的容器类组件，例如多语言配置，状态容器等等，可以借助 `providers` 配置项进行：

    runApp({
      // 传入 providers 组件实例，按照传入顺序进行包裹
      providers: [<ConfigProvider />, <LocaleProvider />],
    });

## 设置环境变量​

某些时候你可能需要自定义一些环境变量，以便在应用运行在不同的环境中的时候进行快速的判断。你可以借助 `tango.env` 来快速的获取到应用的环境信息。需要注意的是，默认情况下不会有任何的环境信息，你可以在需要的时候通过在 `runApp` 中传入 `getEnv` 设置的方式来设置你想要的环境变量。

例如：

    runApp({
      // 自定义应用的环境信息，你可以返回对象
      getEnv() {
        if (location.origin.includes('tango')) {
          // tango 设计器中
          return 'development';
        }
        if (location.origin.includes('localhost')) {
          // 本地开发
          return 'local';
        }
        return 'production';
      },
    });

在任意地方消费环境变量，例如：

    <Box isRender={tango.env === 'development'}>一个仅在开发态显示的区域</Box>