深入解析umijs/mako项目的配置系统

原创于 2025-06-25 09:23:28 发布 · 332 阅读

9 ·

CC 4.0 BY-SA版权

深入解析umijs/mako项目的配置系统

umijs/mako作为一款现代化的前端构建工具，提供了丰富而灵活的配置选项。本文将全面解析mako的配置系统，帮助开发者更好地掌握和使用这个工具。

基础配置方式

在项目根目录下创建mako.config.json文件即可开始配置mako。配置采用JSON格式，例如：

{
  "entry": {
    "index": "./src/index.js"
  }
}

核心配置项详解

构建入口配置

entry字段用于指定项目的构建入口文件，支持多入口配置：

{
  "entry": {
    "index": "./src/index.js",
    "login": "./src/login.js"
  }
}

构建模式选择

mode字段决定构建模式，可选值为：

"development"：开发模式
"production"：生产模式

{
  "mode": "production"
}

代码分割策略

codeSplitting提供了三种代码分割策略：

auto策略：自动分割

{
  "codeSplitting": {
    "strategy": "auto"
  }
}

granular策略：细粒度分割

{
  "codeSplitting": {
    "strategy": "granular",
    "options": {
      "frameworkPackages": ["react", "antd"],
      "libMinSize": 160000
    }
  }
}

advanced策略：高级自定义分割

{
  "codeSplitting": {
    "strategy": "advanced",
    "options": {
      "minSize": 20000,
      "groups": [
        {
          "name": "common",
          "allowChunks": "entry",
          "minChunks": 1,
          "minSize": 20000,
          "maxSize": 5000000,
          "priority": 0,
          "test": "(?:)"
        }
      ]
    }
  }
}

输出配置

output字段控制输出行为：

{
  "output": {
    "path": "dist",
    "mode": "bundle",
    "esVersion": "es2022",
    "meta": false,
    "chunkLoadingGlobal": "",
    "preserveModules": false,
    "preserveModulesRoot": "",
    "crossOriginLoading": false
  }
}

开发服务器配置

devServer字段配置开发服务器：

{
  "devServer": {
    "host": "127.0.0.1",
    "port": 3000
  }
}

高级功能配置

CSS相关配置

CSS Modules：

{
  "autoCSSModules": false,
  "cssModulesExportOnlyLocales": false
}

Less支持：

{
  "less": {
    "modifyVars": {
      "primary-color": "#1DA57A"
    },
    "math": "always"
  }
}

PostCSS支持：

{
  "postcss": true
}

React相关配置

{
  "react": {
    "runtime": "automatic",
    "pragma": "React.createElement",
    "import_source": "react",
    "pragma_frag": "React.Fragment"
  }
}

插件系统

mako支持丰富的插件系统：

{
  "plugins": [
    "plugin-name",
    {
      "name": "custom-plugin",
      "buildStart": () => {
        console.log("Build started");
      }
    }
  ]
}

实验性功能

mako提供了一些实验性功能：

循环依赖检测：

{
  "experimental": {
    "detectLoop": {
      "ignoreNodeModules": false,
      "graphviz": true
    }
  }
}

魔法注释支持：

{
  "experimental": {
    "magicComment": true
  }
}

性能优化配置

构建优化

{
  "optimization": {
    "skipModules": true,
    "concatenateModules": true
  }
}

资源内联

{
  "inlineLimit": [],
  "inlineExcludesExtensions": ["webp"]
}

外部依赖

{
  "externals": {
    "react": "React",
    "react-dom": "ReactDOM"
  }
}

实用工具配置

文件复制

{
  "copy": ["public", {"from": "assets", "to": "static"}]
}

环境变量

{
  "define": {
    "FOO": "foo",
    "BAR": "bar"
  }
}

进度显示

{
  "progress": {
    "progressChars": "▨▨"
  }
}

总结

umijs/mako提供了全面而灵活的配置系统，覆盖了从基础构建到高级优化的各个方面。通过合理配置，开发者可以：

精确控制构建过程
优化输出结果
扩展构建功能
提升开发体验

掌握这些配置选项，将帮助开发者充分发挥mako的潜力，构建出高性能的现代Web应用。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考