Category: React

概要

1. umi

2. cross-env 多环境配置

---

umi

简单介绍

Check umijs here

umi = roadhog + 路由 + HTML 生成 + 完善的插件机制

cross-env多环境配置

为什么需要多环境配置

一般，工程存在三个环境配置即开发环境 dev，测试环境 staging，正式环境 prod，配置中的插件，路由，语言等配置一般情况下可以在多个环境通用。
但是其中的第三方应用密钥，接口地址等都可能因为环境的改变而改变。

当需要发布至其他环境，则需要在打包前对配置进行手动的修改或替换。来让 SDK 确定打包时使用或输出后的配置文件。

cross-env

使用 cross-env，在打包使用的命令中加入环境参数的标识。让 umi 的打包省去修改配置的步骤，实现一键打包。

实操

umi 的配置可以使用.umirc.ts 或 config/config.ts，我们这里使用 config.ts 作为例子。
首先提取公共的项目配置部分保存为 config.ts。

import { IConfig } from 'umi-types'; // ref: https://umijs.org/config/

const baseConfig: IConfig = {
  treeShaking: true,
  routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        {
          path: '/',
          component: './index',
        }
      ],
    },
  ],
  plugins: [
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: true,
        dynamicImport: {
          webpackChunkName: true,
        },
        title: 'Demo',
        dll: true,
        locale: {
          enable: true,
          default: 'en-US',
        },
        routes: {
          exclude: [
            /models\//,
            /services\//,
            /model\.(t|j)sx?$/,
            /service\.(t|j)sx?$/,
            /components\//,
          ],
        },
      },
    ],
  ],
};
export default baseConfig;

新建 config.dev.ts，config.prod.ts，导入公共配置并加入开发环境以及正式环境的特有配置。

import { IConfig } from 'umi-types'; // ref: https://umijs.org/config/
import baseConfig from './config'; // ref: https://umijs.org/config/

const config: IConfig = {
  ...baseConfig,
  define: {
    "process.env.apiUrl": 'https://api.test.com',
    "process.env.appKey": 'key',
    "process.env.appSecret": 'secret'
  },
};

export default config;

代码中使用process.env.apiUrl即可获取到当前配置的对应值

开启 dev-server

    cross-env UMI_ENV=dev umi dev

打包

    cross-env UMI_ENV=prod umi build