Umi.js 项目中集成 Mako 特有配置的最佳实践

背景介绍

在现代前端开发中，构建工具的配置优化对于项目性能至关重要。Umi.js 作为企业级前端应用框架，其底层构建工具 Mako 提供了一些特有的优化配置项，如 px2rem、flexBugs 修复等。然而，这些配置原先需要通过单独的 mako.config.json 文件进行设置，对于 Umi 用户来说不够友好。

配置集成方案

Umi 4 版本开始，开发者可以直接在 umi 配置文件中使用 mako 特有的配置项。这一改进使得配置更加集中，减少了维护多个配置文件的负担。

支持的白名单配置项

目前 Umi 支持透传以下 Mako 配置项：

1. px2rem: 用于自动将 px 单位转换为 rem 单位，适配不同屏幕尺寸
2. experimental: 实验性功能配置
3. flexBugs: 修复 Flexbox 布局中的常见问题
4. optimization: 构建优化相关配置

配置示例

开发者可以在 .umirc.ts 配置文件中直接添加 mako 配置：

// .umirc.ts
export default {
  mako: {
    px2rem: {
      // px2rem 配置项
    },
    flexBugs: {
      // flexBugs 配置项
    }
  }
}

配置项详解

px2rem 配置

px2rem 是移动端适配的重要工具，可以将设计稿中的 px 单位自动转换为 rem 单位。典型配置包括：

• rootValue: 根元素字体大小
• propList: 需要转换的属性列表
• mediaQuery: 是否转换媒体查询中的 px

flexBugs 配置

flexBugs 用于解决 Flexbox 布局中的常见兼容性问题，如：

• iOS 设备上的 flex 布局问题
• 某些浏览器中的 flex 项最小尺寸问题

optimization 配置

optimization 提供了一系列构建优化选项，包括：

• 代码分割策略
• 资源压缩选项
• 依赖优化配置

注意事项

1. 出于稳定性考虑，Umi 目前只透传了部分经过验证的 Mako 配置项
2. 某些实验性功能（如 moduleIdStrategy）暂未开放，以避免潜在的构建问题
3. 建议在升级 Umi 版本时检查 mako 配置的兼容性

总结

Umi 与 Mako 的深度集成简化了前端项目的构建配置流程。通过统一配置文件的方式，开发者可以更便捷地使用 Mako 提供的各种优化功能，同时保持配置的集中管理。这一改进既提升了开发体验，又保证了构建过程的稳定性。