umi之define属性

含义：

用于提供给项目全局中可用的常量，每个页面都可使用

例:

在跟目录.umirc文件里进行配置 define

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' }
  ],
  fastRefresh: {},

  // DefinePlugin全局常量
  define:{
    'stateDemo':'1000'
  }
});

页面中的使用

import styles from './index.less';
import React, { Component } from 'react'

export default class index extends Component{

  // 在生命周期里进行打印
  componentDidMount(){
    console.log(stateDemo)
  }

  render(){
    return (
      <div>
        <h1 className={styles.title}>Page index</h1>
      </div>
    );
  }
}

在控制台查看

image.png

问题：tsx中报错提示找不到stateDemo名称

在网上找到了2种解决方案，我这里第二种方式解决了

解决方法：

1. 使用完整引用：process.env.stateDemo

2. 全局声明 FOO：在 typings.d.ts 文件中，添加 declare const stateDemo: string // string 是 FOO 的数据类型，如果类型不定，直接写成 any 吧
   如：

   
   image.png

这样就可以完美使用了