umi约定式路由基本了解

umi约定式路由基本了解

先来看一下文档介绍

看重点 启动 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是约定式路由的生成代码

源码如下

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);