调整目录结构（alias，routes）

从这一小节，开始我们将会对上一章节的demo，进行页面的美化和功能的完善。

规划pages下的目录结构

现在我们的pages目录结构如下：

  1. .
  2. ├── hero.css
  3. ├── hero.js
  4. ├── index.css
  5. ├── index.js
  6. ├── item.css
  7. ├── item.js
  8. ├── summoner.css
  9. └── summoner.js

这样的目录结构，当我们的页面越来越多时，或者页面需要的功能文件(model,service,mock等)越来越多时，就会使我们的项目非常凌乱。 所以我们先对pages下的目录结构重新规划

  • step1 将hero.js重命名为hero/index.js
  • step2 将hero.css重命名为hero/index.css
  • step3 添加文件夹 ./src/pages/hero/services/ （空文件夹暂时用不着,添加.gitkeep）
  • step4 添加文件夹 ./src/pages/hero/components/ （空文件夹暂时用不着,添加.gitkeep）
  • step5 将 ./src/models/hero.js 移动到 ./src/pages/hero/models/hero.js ```bash ERROR Failed to compile with 1 errors 08:54:02

This relative module was not found:

  • ../services/api in ./src/pages/hero/models/hero.js
    1. 这时候会有一个报错，因为我们在model里面对文件的引用使用的是相对路径。
    2. 所以当移动到pages目录下时，就会出现如上引用路径错误的问题。
    3. ## 添加alias别名
    4. 这里我们使用webpack的别名来处理这个问题，
    5. 在umi中使用非常简单，只要在配置文件里面，添加alias配置
    6. ```javascript
    7. const path = require('path');
    8. export default {
    9. plugins: [
    10.   ...
    11. ],
    12. alias: {
    13.   utils: path.resolve(__dirname, 'src/utils'),
    14.   services: path.resolve(__dirname, 'src/services'),
    15.   models: path.resolve(__dirname, 'src/models'),
    16. },
    17. };
    这里我们添加了我们现有的几个目录的映射。这样子我们在项目中就可以直接使用别名来代替相对路径来。 如
    1. import { queryHeroList, getHeroDetails } from 'services/api';
    不论是在项目中的哪个目录下面引用，都不会找不到文件。 最终我们规划好的pages下的文件结构如下
    1. .
    2. ├── hero
    3. │   ├── components
    4. │   │   └── .gitkeep
    5. │   ├── index.css
    6. │   ├── index.js
    7. │   ├── models
    8. │   │   └── hero.js
    9. │   └── services
    10. │       └── .gitkeep
    11. ...
    由于umi约定了，pages下的目录会被解析成路由，你可以通过访问一个错误的路由地址，来重定向到开发404页面，查看你现有的所有路由。 如，此时我们访问 http://localhost:8000/hero1 
    1. Your Routes
    2.   -/
    3.    --/hero
    4.    --/hero/models/hero
    5.    --/
    6.    --/item
    7.    --/summoner
    但是有时候我们只是把某些文件放在pages目录下面，但并不希望用它来生成任何路由，如我们现在的models文件，即 /hero/models/hero 这个路由是我们不需要的。（可能你还会在pages下面放images之类的）

    配置routes的exclude

    这时候，我们可以通过配置routes的exclude来过滤掉一些文件。
    1. const path = require('path');
    2. export default {
    3. plugins: [
    4.   [
    5.     'umi-plugin-react',
    6.     {
    7.       ...
    8.       routes: {
    9.         exclude: [
    10.            /model\.(j|t)sx?$/,
    11.            /service\.(j|t)sx?$/,
    12.            /models\//,
    13.            /components\//,
    14.            /services\//,
    15.         ],
    16.       }
    17.     },
    18.   ],
    19. ],
    20. ...
    21. };
    再次访问 http://localhost:8000/hero1 
    1. Your Routes
    2.   -/
    3.    --/hero
    4.    --/
    5.    --/item
    6.    --/summoner

作业

参照上面的操作，完成item、summoner页面的目录结构修改。 最终我们的pages目录结构为

  1. .
  2. ├── hero
  3. │   ├── components
  4. │   │   └── .gitkeep
  5. │   ├── index.css
  6. │   ├── index.js
  7. │   ├── models
  8. │   │   └── hero.js
  9. │   └── services
  10. │       └── .gitkeep
  11. ├── index.css
  12. ├── index.js
  13. ├── item
  14. │   ├── components
  15. │   │   └── .gitkeep
  16. │   ├── index.css
  17. │   ├── index.js
  18. │   ├── models
  19. │   │   └── item.js
  20. │   └── services
  21. │       └── .gitkeep
  22. └── summoner
  23.     ├── components
  24.     │   └── .gitkeep
  25.     ├── index.css
  26.     ├── index.js
  27.     ├── models
  28.     │   └── summoner.js
  29.     └── services
  30.         └── .gitkeep

代码回顾：这节课的全部代码