Umi

1 项目目录

官方文档 -> https://umijs.org/zh-CN

### 项目目录结构  (没有的就自己创建)
------------------------------------------------------------------------------
├── config                   # umi 配置，包含路由，构建等配置 +++
	├── config.js   +++      # 对应的配置文件
├── mock                     # 本地模拟数据
├── public                   # 一些公共静态资源  +++
├── src
│   ├── assets               # 本地静态资源 ++++++
│   ├── components           # 业务通用组件 ++++++
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局 ++++++
│   ├── models               # 全局 dva model ++++++
│   ├── pages                # 业务页面入口和常用模板 ++++++
│   ├── services             # 后台接口服务, 集中管理接口路径的 ++++++
│   ├── utils                # 工具库, Axios, 数据请求的二次封装等 ++++++
│   ├── locales              # 国际化资源 ++++++
│   ├── service-worker.js    # 用于做缓存的 ++++++
│   ├── manifest.json        # 是扩展的配置文件 ++++++
│   ├── global.less          # 全局样式 ++++++
│   └── global.jsx           # 全局 JS ++++++
├── tests                    # 测试工具
├──.editorconfig  //编辑器配置文件
├──.gitignore  //git忽略配置文件
├──.env  //环境变量, 初始化项目的时候没有该文件, 需要手动添加
├──.env.example
├──.prettierignore  //代码格式化时忽略的文件配置
├──.prettierrc  //代码格式化的规范配置
├──.eslintignore  //代码规范
├──.eslintrc.js   //代码规范
├──.umirc.ts   (可用于写一些简单配置, 记住若想 config 生效需要删除这个文件)
├── jest.config.js
├── README.md
└── package.json


----------------------------- 注意事项 --------------------------------

1 .umirc 如果存在, 那么 config 中的配置是不生效的 (二存一)  //都不存在默认约定式路由

2 npm run eject  //把 webpack.config.js 配置文件暴露出来 -- 慎用暂时不太懂

3 组件中展示子路由配置文件的视图容器 -> { props.children } 

2 项目配置

"config.js"

export default defineConfig({

  routes,   // 路由映射表 +++
  proxy,    // 跨域请求代理配置项 +++
  hash: true,  //配置是否让生成的文件包含 hash 后缀, 通常用于增量发布和避免浏览器加载缓存 +++
  title: false,  //title 配置标题; false 表示禁用内置的 title 渲染机制
  targets: { ie: 11 },   //配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换
  history: { type: 'browser'},  //type，可选 browser、hash 和 memory, 默认 browser
  
  ignoreMomentLocale: true,  //默认是 false, true 忽略 moment 的 locale 文件，用于减少尺寸, 属于小优化吧
  antd: true, //启用后自动配置 babel-plugin-import，实现antd按需加载 (这个不懂先不用)
  treeShaking: true,   //去除那些引用的但却没有使用的代码, 不确定是否有用 ???
  base: '/web/',  //部署到非根目录时才需配置
  publicPath: '/web/', //部署到非根目录和 base 一起使用


  plugins: [  //配置额外的 umi 插件, 好像不是很必要
    'umi-plugin-hello'  //插件的参数平级的配置项声明
  ], 

  dva: {
    hmr: true   // 默认 false 关闭; 表示是否启用 dva model 的热更新 +++
  },
  
  manifest: {
    basePath: '/'   // 用于给所有文件路径加前缀 +++
  }

  dynamicImport: {   //是否启用按需加载, 即是否把构建产物进行拆分, 在需要的时候下载额外的 JS 再执行
    // 默认关闭 fasle, 省心部署方便, 开启的话还需要进行其他的相关配置
    loading: '@/components/PageLoading/index'  //子配置项, 不开启也能配置, 
    webpackChunkName: true   //实现有意义的异步文件名, 是属于一定的优化吧
  },
    
  theme: {  // 配置主题, 实际上是配 less 变量
    'primary-color': defaultSettings.primaryColor,  // 固定的
    "@primary-color": "#1DA57A"   //可 less 变量
  }
})

3 环境变量

1 概念 🔶
----------------------------------------------------------------------------------------------
  1 项目环境 -> 开发环境 (本地) + 测试环境 + 生产环境   // 注意测试和生产环境请求的是不同的数据库

  2 环境变量 -> 定义变量 -> 让其在不同环境中拥有不同值

  3 Umi 中存在一些内置环境变量   // 文档 -> 环境变量

  4 NODE_ENV 特殊环境变量   // 无法区分测试和生产环境
    const {NODE_ENV} = process.env
    if ( NODE_ENV === "development" ) { /* 只在开发环境运行的代码 */ }
    if ( NODE_ENV === "production" ) { /* 只在项目打包后运行的代码 */ }

  5 自定义环境变量 -> 添加到全局 -> 使用   // 项目打包时不会带 .env 文件的, 默认使用 || 后面的值
----------------------------------------------------------------------------------------------


2 设置 🔶
--------------------------------------------------------------------------------------------
  1 执行命令时添加设置   // 通常会配置 package.json 脚本命令来实现
  
	"start": "umi dev"   // 正常启动项目
	"start": "PORT=3000 umi dev"   // 以 3000 端口号启动项目


  2 环境变量配置文件中设置   // 根目录下的 .env 文件

	PORT=3000
	BABEL_CACHE=none
	XX_URL=http://172.21.4.248:81   // 自定义环境变量 -> 需要添加到全局变量中去使用
	XX_TYPE="string"
--------------------------------------------------------------------------------------------


3 添加   // config.js
--------------------------------------------------------------------------------------------
const {XX_URL, XX_TYPE} = process.env   // 找不到为 undefined, 不会报错

define: {   // 相当于定义了全局变量
  XX_TYPE: XX_TYPE || "num",
  XX_URL: XX_URL || www.baidu.com
}   // 组件中 -> console.log(XX_URL) -> 即可访问
--------------------------------------------------------------------------------------------

4 多份环境配置文件

1 yarn add cross-env   // 用于配置脚本命令


2 新建三个文件   // 开发, 测试, 生产
--------------------------------------------------------------------------------------------
  config.js -> define {"envType": "dev"}   // 非必须定义, 可用来在页面, 区分当前是哪个环境

  config.test.js -> define {"envType": "test"}

  config.prod.js -> define {"envType": "pro"}
--------------------------------------------------------------------------------------------


3 配置 package.json 脚本命令   // 不同的启动, 打包, 项目的命令 -> 会使用不同的配置文件
--------------------------------------------------------------------------------------------
  "start_test": "cross-env UMI_ENV=test umi dev"   // 使用 config.test.js 配置文件, 启动项目
  "start:prod": "cross-env UMI_ENV=prod umi dev"   // 使用 config.prod.js 配置文件, 启动项目
  "build_test": "cross-env UMI_ENV=test umi build"   // 使用 config.test.js 配置文件, 打包项目
  "build_prod": "cross-env UMI_ENV=prod umi build"   // 使用 config.prod.js 配置文件, 打包项目
--------------------------------------------------------------------------------------------


4 如有判断环境的需求
--------------------------------------------------------------------------------------------
  1 console.log(envType)   // OK

  2 相关操作
    let host = ''
    if (envType === "dev") {host = "www.baidu.com"}   // return host
    if (envType === "pro") {return "http://172.21.4.248:81"}   // 更加简单直接
--------------------------------------------------------------------------------------------

5 跨域请求代理

/*------------------------- 描述 --------------------------------*/

  1 开发环境中, 访问后端数据, 存在跨域问题, 需要通过 node 后端代理, 来解决浏览器跨域问题

  2 项目打包后, 跨域请求代理是失效的   // 需要后端允许, 或者部署在同一服务器上



/*------------------------- config.js --------------------------------*/
export default {
  proxy: {
    '/api': {   // 检测域名后面带 /api/ 的路径
      'target': 'https://xxx.com/',   // 要请求的域名或IP地址
      'changeOrigin': true,
      'pathRewrite': { '^/api' : '' },   // 把域名后面的 /api 去掉
    },
  },
}

1 自动检测到的路径 -> https://xxx.com/api/xxx
2 然后去请求的路径 -> https://xxx.com/xxx