React系列文章之umi

​​​​前言

提示：本文章来自珠峰培训周啸天老师的视频讲解总结

视频地址：122.umi4中的各种配置项处理_哔哩哔哩_bilibili

umi：Umi 介绍

antd: 全局化配置 ConfigProvider - Ant Design

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、umi脚手架

1、创建umi项目

        安装pnpm 命令 install pnpm -g node版本要nvm 切到18版本

        创建umi项目命令 pnpm dlx create-umi@latest

        或者使用yarn 命令 yarn create umi

2、修改运行的host，端口号

        创建.env文件，代码如下

HOST=127.0.0.1
PORT=3004

        或者在package.json中修改，要先安装cross-env，然后在scripts中进行配置例如：

"start": "cross-env HOST=127.0.0.1 PORT=3000 roadhog server",
//安装包版本
"cross-env": "7.0.3",

3、umi配置

        默认是在.umirc.ts文件下配置，我们手动创建config目录同时创建config.ts文件并把umirc.ts文件删除umi常用配置项

import { defineConfig } from "umi";
import routes from './routes';
export default defineConfig({
  
  /**基本设置 */
  // 关闭所有环境下的sourceMap
  // devtool: false,
  // 只设置dev阶段的sourceMap
  devtool: process.env.NODE_ENV === 'development' ? 'eval' : false,
  //打包后的文件名带哈希值「处理缓存」开启 hash 模式，让 build 之后的产物包含 hash 后缀。
  // 通常用于增量发布和避免浏览器加载缓存
  hash: true,
  // 配置图片文件是否走 base64 编译的阈值。默认是 10000 字节，少于他会被编译为 base64 编码，否则会生成单独的文件。
  inlineLimit: 1000,
  // 设置js的压缩方式「默认是esbuild」
  // jsMinifier 的配置项；默认情况下压缩代码会移除代码中的注释，可以通过对应的 jsMinifier 选项来保留注释
  jsMinifier: 'terser',
  jsMinifierOptions: {},
  // 设置umi插件
  plugins: [],
  // 设置打包后资源导入的路径「默认是“/”」可以设置CDN
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  // 有关路由的处理