umi约定式路由基本了解

灰太狼 2022-03-19 17:56 693阅读 0赞

# umi约定式路由基本了解 #

## 先来看一下[文档][Link 1]介绍 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]

> 看重点 `启动 umi dev 后，大家会发现 pages 下多了个 .umi 的目录。这是啥？这是 umi 的临时目录，可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。`

## 先看一下我们umi dev的时候怎么运行的 ##

#!/usr/bin/env node
    
    const resolveCwd = require('resolve-cwd');
    
    const localCLI = resolveCwd.silent('umi/bin/umi');
    if (localCLI && localCLI !== __filename) { 
      const debug = require('debug')('umi');
      debug('Using local install of umi');
      require(localCLI);
    } else { 
      require('../lib/cli');
    }

中间一些列省略。。。  
  
`最后找到这个文件夹下面的这些文件` 其中getRouteConfigFromDir.js是约定式路由的生成代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]

> 源码如下

import {  readdirSync, statSync, existsSync, readFileSync } from 'fs';
    import {  join, extname, basename, relative } from 'path';
    import {  winPath, findJS } from 'umi-utils';
    import assert from 'assert';
    import getYamlConfig from './getYamlConfig';
    
    const debug = require('debug')('umi-build-dev:getRouteConfigFromDir');
    const JS_EXTNAMES = ['.js', '.jsx', '.ts', '.tsx'];
    
    export default function getRouteConfigFromDir(paths) { 
      const {  cwd, absPagesPath, absSrcPath, dirPath = '' } = paths;
      const absPath = join(absPagesPath, dirPath);
      const files = readdirSync(absPath);
    
      const absLayoutFile = findJS(absPagesPath, '_layout');
      if (absLayoutFile) { 
        throw new Error(
          'root _layout.js is not supported, use layouts/index.js instead',
        );
      }
    
      const routes = files
        .filter(file => { 
          if (file.charAt(0) === '.' || file.charAt(0) === '_') return false;
          return true;
        })
        .sort(a => (a.charAt(0) === '$' ? 1 : -1))
        .reduce(handleFile.bind(null, paths, absPath), [])
        .sort((a, b) => { 
          if (a.isParamsRoute !== b.isParamsRoute) return a.isParamsRoute ? 1 : -1;
          if (a.exact !== b.exact) return !a.exact ? 1 : -1;
          return 0;
        })
        .map(a => { 
          delete a.isParamsRoute;
          return a;
        });
    
      if (dirPath === '' && absSrcPath) { 
        const globalLayoutFile =
          findJS(absSrcPath, 'layouts/index') || findJS(absSrcPath, 'layout/index');
        if (globalLayoutFile) { 
          const wrappedRoutes = [];
          addRoute(
            wrappedRoutes,
            { 
              path: '/',
              component: `./${ relative(cwd, globalLayoutFile)}`,
              routes,
            },
            { 
              componentFile: globalLayoutFile,
            },
          );
          return wrappedRoutes;
        }
      }
    
      return routes;
    }
    
    function handleFile(paths, absPath, memo, file) { 
      const {  cwd, absPagesPath, dirPath = '' } = paths;
      const absFilePath = join(absPath, file);
      const stats = statSync(absFilePath);
      const isParamsRoute = file.charAt(0) === '$';
    
      if (stats.isDirectory()) { 
        const newDirPath = join(dirPath, file);
        // routes & _layout
        const routes = getRouteConfigFromDir({ 
          ...paths,
          dirPath: newDirPath,
        });
        const absLayoutFile = findJS(join(absPagesPath, newDirPath), '_layout');
        if (absLayoutFile) { 
          addRoute(
            memo,
            { 
              path: normalizePath(newDirPath),
              exact: false,
              component: `./${ winPath(relative(cwd, absLayoutFile))}`,
              routes,
              isParamsRoute,
            },
            { 
              componentFile: absLayoutFile,
            },
          );
        } else { 
          memo = memo.concat(routes);
        }
      } else if (stats.isFile() && isValidJS(file)) { 
        const bName = basename(file, extname(file));
        const path = normalizePath(join(dirPath, bName));
        addRoute(
          memo,
          { 
            path,
            exact: true,
            component: `./${ winPath(relative(cwd, absFilePath))}`,
            isParamsRoute,
          },
          { 
            componentFile: absFilePath,
          },
        );
      }
    
      return memo;
    }
    
    function normalizePath(path) { 
      let newPath = `/${ winPath(path) .split('/') .map(path => path.replace(/^\$/, ':').replace(/\$$/, '?')) .join('/')}`;
    
      // /index/index -> /
      if (newPath === '/index/index') { 
        newPath = '/';
      }
      // /xxxx/index -> /xxxx/
      newPath = newPath.replace(/\/index$/, '/');
    
      // remove the last slash
      // e.g. /abc/ -> /abc
      if (newPath !== '/' && newPath.slice(-1) === '/') { 
        newPath = newPath.slice(0, -1);
      }
    
      return newPath;
    }
    
    function addRoute(memo, route, {  componentFile }) { 
      const code = readFileSync(componentFile, 'utf-8');
      debug(`parse yaml from ${ componentFile}`);
      const config = getYamlConfig(code);
      ['path', 'exact', 'component', 'routes'].forEach(key => { 
        assert(!(key in config), `Unexpected key ${ key} in file ${ componentFile}`);
      });
      memo.push({ 
        ...route,
        ...config,
      });
    }
    
    function isValidJS(file) { 
      return JS_EXTNAMES.includes(extname(file));
    }

thanks

[Link 1]: https://umijs.org/zh/guide/getting-started.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70]: /images/20220319/048465c749e74661bdcd4d47b107d824.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlyZW5fZ2V0_size_16_color_FFFFFF_t_70 1]: /images/20220319/8d2ff58240cd451ebb92957a2a14317a.png