• 介绍

    1.1 Umi是什么？
    是可扩展的企业级前端应用框架，Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由 的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个 生命周期，支持各种功能扩展和业务需求。
    ** 1.2 Umi功能
    可扩展，开箱即用，企业级，大量自研，完备路由，面向未来
     1.3 什么时候不用Umi**

    • 需要支持 IE 8 或更低版本的浏览器
    • 需要支持 React 16.8.0 以下的 React
    • 需要跑在 Node 10 以下的环境中
    • 有很强的 webpack 自定义需求和主观意愿
    • 需要选择不同的路由方案

    1.4 Umi如何工作？

    • 配置式路由和约定式路由
    • .umi 临时文件

    1.5 快速上手

    • 环境准备
    • 脚手架（$ yarn create @umijs/umi-app）
    • 安装依赖
    • 启动项目（$ yarn start）
    • 修改配置（内置 @umijs/preset-react）需安装@ant-design/pro-layout

    **

    • Umi基础

    1.1 目录结构
    根目录 （package.json） .umirc.ts（包含 umi 内置功能和插件的配置）
    .env (环境变量) layouts/index.tsx （约定式路由时的全局布局文件。）
    pages 目录 （组件） dist 目录 /src目录
    app.ts（运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。）
    1.3 配置
    Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件，支持 es6
    如果你想在写配置时也有提示，可以通过 umi 的 defineConfig 方法定义配置
    本地临时配置 多环境多份配置
    1.2 运行时配置
    运行时配置和配置的区别是他跑在浏览器端
    约定 src/app.tsx 为运行时配置
    1.3 路由
    path （配置可以被 path-to-regexp@^1.7.0 理解的路径通配符）
    component （配置 location 和 path 匹配后用于渲染的 React 组件路径）
    exact （表示是否严格匹配，即 location 是否和 path 完全对应上）
    routes （配置子路由，通常在需要为多个路径增加 layout 组件时使用。）
    redirect （重定向）
    wrappers （用于路由级别的权限校验）
    title （路由的标题）
    histoy.push (页面跳转)
    hash 路由 Link 组件
    路由组件参数 (路由组件可通过 props 获取到以下属性:match,location,history,route,routes)
    传递参数给子路由
    1.4 约定式路由
    除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置
    如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。
    动态路由 （约定 [] 包裹的文件或文件夹为动态路由。
    动态可选路由 （约定 [ $] 包裹的文件或文件夹为动态可选路由）

    • Umi配置

    1.1 404
    约定式路由中 404 页面的生效规则，可通过设置为 false 关闭。
    1.2 **alias
    配置别名，对引用路径进行映射。
    1.3 **analyze
    包模块结构分析工具，可以看到项目各模块的大小，按需优化。
    通过 ANALYZE=1 umi build 或 ANALYZE=1 umi dev 开启，默认 server 端口号为 8888。
    更多配置如下：
    analyzerMode: ‘server’，analyzerPort: 8888,openAnalyzer: true,generateStatsFile: false,
    statsFilename: ‘stats.json’,logLevel: ‘info’,defaultSizes: ‘parsed’, // stat // gzip
    1.3 **autoprefixer
    不要设置 overrideBrowserslist，此配置被内部接管，通过 targets 配置项选择你要兼容
    的浏览器。
    1.4 **base
    设置路由前缀，通常用于部署到非根目录。
    1.5 **chainWebpack
    通过 webpack-chain 的 API 修改 webpack 配置。
    1.6 **devServer
    配置开发服务器。
    包含以下子配置项：

    • port，端口号，默认 8000
    • host，默认 0.0.0.0
    • https，是否启用 https server，同时也会开启 HTTP/2

    • writeToDisk，生成 assets 到文件系统

      启用 port 和 host 也可以通过环境变量 PORT 和 HOST 临时指定。
      1.7 **devtool**
      用户配置 sourcemap 类型。

    • eval，最快的类型，但不支持低版本浏览器，如果编译慢，可以试试

    • source-map，最慢最全的类型

      1.8 **dynamicImport
      是否启用按需加载，即是否把构建产物进行拆分，在需要的时候下载额外的 JS 再执行。
      默认关闭时，只生成一个 js 和一个 css，即 umi.js 和 umi.css。优点是省心，部署方便；
      缺点是对用户来说初次打开网站会比较慢
      1.9 **dynamicImportSyntax
      如果你不需要路由按需加载，只需要支持 import() 语法的 code splitting，可使用此配置。
      2.0 **exportStatic
      配置 html 的输出形式，默认只输出 index.html
      2.1 **extraBabelIncludes
      配置额外需要做 babel 编译的 npm 包或目录
      2.2 **extraBabelPresets
      配置额外的 babel 插件集。
      2.3 **extraPostCSSPlugins
      配置额外的 postcss 插件
      2.4 **favicon
      配置 favicon 地址（href 属性）。
      2.5 **forkTSChecker
      开启 TypeScript 编译时类型检查，默认关闭。
      2.6 **fastRefresh
      快速刷新（Fast Refresh），开发时可以      保持组件状态，同时编辑提供即时反馈。
      2.7 **hash
      配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存。
      2.8 **headScripts
      配置 <head> 里的额外脚本，数组项为字符串或对象。
      2.9 **history
      配置 history 类型和配置项。

    • type，可选 browser、hash 和 memory

    • options，传给 create{{{ type }}}History 的配置项，每个类型器的配置项不同

    3.0 **ignoreMomentLocale
    忽略 moment 的 locale 文件，用于减少尺寸。
    3.1 **inlineLimit
    配置图片文件是否走 base64 编译的阈值。默认是 10000 字节，少于他会被编译为 base64 编码，
    否则会生成单独的文件。
    3.2 **lessLoader
    设置 less-loader 配置项
    additionalData {String|Function} webpackImporter {Boolean}
    lessOptions {Object|Function} sourceMap {Boolean} implementation {Object}
    3.3 **links
    配置额外的 link 标签。
    3.4 **manifest**
    配置是否需要生成额外用于描述产物的 manifest 文件，默认会生成 asset-manifest.json

    • fileName，文件名，默认是 asset-manifest.json
    • publicPath，默认会使用 webpack 的 output.publicPath 配置
    • basePath，给所有文件路径加前缀
    • writeToFileEmit，开发模式下，写 manifest 到文件系统中

    3.5 **metas
    配置额外的 meta 标签。数组中可以配置key:value形式的对象。
    3.6 **mock
    配置 mock 属性。
    包含以下子属性：

    • exclude，格式为 Array(string)，用于忽略不需要走 mock 的文件

    3.7 **mountElementId
    指定 react app 渲染到的 HTML 元素 id。
    3.8 **mpa
    切换渲染模式为 mpa。
    包含以下特征：

    • 为每个页面输出 html
    • 输出不包含 react-router、react-router-dom、history 等库
    • 渲染和 url 解绑，html 文件放哪都能使用

    4.0 **nodeModulesTransform**
    设置 node_modules 目录下依赖文件的编译方式。
    子配置项包含：

    • type，类型，可选 all 和 none

    • exclude，忽略的依赖库，包名，暂不支持绝对路径

      两种编译模式，

    • 默认是 all，全部编译，然后可以通过 exclude 忽略不需要编译的依赖库；

    • 可切换为 none，默认值编译 es5-imcompatible-versions 里声明的依赖，可通过 exclude

      1.    配置添加额外需要编译的；<br />前者速度较慢，但可规避常见的兼容性等问题，后者反之。<br />**4.1 ****outputPath**<br />指定输出路径。

    • 不允许设定为 src、public、pages、mock、config 等约定目录

    4.2 **plugins**
    配置额外的 umi 插件。

    • 不允许设定为 src、public、pages、mock、config 等约定目录

    4.3 **polyfill
    配置额外的 umi 插件。
    4.4 **postcssLoader
    设置 postcss-loader 配置项
    4.5 **proxy
    配置代理能力。
    4.6 **publicPath
    配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的 值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可 以。如果使用一些特殊的文件系统，比如混合开发或者 cordova 等技术，可以尝试将 publicPath 设置 成 ./ 相对路径。
    4.6 **routes
    配置路由。
    umi 的路由基于 react-router@5 实现，配置和 react-router 基本一致，详见路由配置章节
    4.7 **runtimePublicPath
    配置是否启用运行时 publicPath
    通常用于一套代码在不同环境有不同的 publicPath 需要，然后 publicPath 由服务器通过 HTML
    的 window.publicPath 全局变量输出。
    4.8 **scripts
    同 headScripts，配置 <body> 里的额外脚本。
    4.9 **singular
    配置是否启用单数模式的目录。
    5.0 **styleLoader
    启用并设置 style-loader 配置项，用于让 CSS 内联打包在 JS 中，不输出额外的 CSS 文件
    5.1 **styles
    配置额外 CSS
    5.2 **targets
    配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。
    5.3 **terserOptions
    配置压缩器 terser 的配置项
    5.4 **theme
    配置主题，实际上是配 less 变量。
    5.5 **title
    配置标题，此外，你还可以针对路由配置标题
    5.6 **webpack5**
    使用 webpack 5 代替 webpack 4 进行构建。
    物理缓存功能默认开启，可通过设置环境变量 WEBPACK_FS_CACHE 为 none 来禁用。
    包含以下子配置项：

    • lazyCompilation，是否启用基于路由的按需编译

    5.7 **workerLoader**
    开启 worker-loader 功能。