Umi.js学习笔记1-基于Antd Pro视角-目录及约定

1. mock/

全局：模拟数据（umi还可以局部mock）

1.1 怎么解析mock文件

umi遍历此目录下所有的 .js 文件,包括 _ 前缀的，进行解析。

1.2 怎么写

在mock文件中这么写

export default {
  '/api/users': ['a', 'b'],
};

当程序跑起来后，就可以这样访问：
http://localhost:8000/api/users

1.3 可以配置忽略部分解析

在配置文件中，指定mock.exclude配置，如下

export default {
  mock: {
    exclude: ['mock/**/_*.js', 'mock/_*/**/*.js'],
  },
};

2. config.js

里面配置路由的（关于路由类型，得专门研究，如约定式路由，配置式路由）

3.dist/

默认的 build 输出目录，如果不想在这里输出，可通过配置 outputPath 修改。

4. src/

默认的源码目录设定在这，在umi中，如果没有这个目录，就会以整个目录做源码目录。

4.1 .umi/

dev 开发环境下产生的临时目录，里面是项目运行时的临时文件，平时可以在这里看看router文件等。

4.2 .umi-production/

build 临时目录，umi build 命令的生产模式下会有这个临时文件。

4.3 layouts/

里面放着全局布局，可以是网页中的一些基础框架布局，甚至在Antd Pro 中 安全认证布局也放在这（登录权限认证等，像是一个中间件的逻辑） 。

• 注意：路由支持，需要配置式路由声明，约定式路由无效。
• 怎么写——全局布局注册写法

没有全局路由时候的配置：

[
  { path: '/', component: './pages/index' },
  { path: '/users', component: './pages/users' },
]

如果有用到全局布局，就应该这么写：

[
  { path: '/', component: './layouts/index', routes: [
    { path: '/', component: './pages/index' },
    { path: '/users', component: './pages/users' },
  ] }
]

4.4 pages/

页面目录，如我在config.js中配置路由，组件路径为 “./”，其所指向就是这个page目录。
里面的文件即路由，如 约定式路由，规定文件即路由（js、jsx、ts 和 tsx 文件）。

4.4.1 document.ejs
这里是html模板，你可以在这里修改项目在浏览器中的一些参数，如title,meta等等，最重要的是<div id="root"></div>

4.4.2 404.js
404 页面

4.4.3 XXX.js
xxx页面 ，任意命名，umi.js会导出响应的react 组件。

4.4.4 xxx.test.js
用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件。

4.5 global.css / global.less

约定的全局样式文件，在平时写页面时，如用到了less处理，可以在局部页面中用:global作局部修改。

4.6 global.js

可以在这里加入 polyfill,p（olyfill是一些让原生浏览器支持的代码，反正是跟浏览器兼容相关的。）
此文件会在入口文件的最前面被自动引入，可以在这里加载补丁，做一些初始化的操作等，如Antd Pro 的pwa相关配置就在这。

4.7 app.js

运行时配置文件，在Antd pro 中没有用到这样配置。
我们可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。

4.8 .test.(js|ts) 和 .e2e.(js|ts)

测试文件，umi test 会查找所有的 .test.js 和 .e2e.js 文件来跑测试。

5. .umirc.js

umi 配置，同 config/config.js，二选一，Antd pro 选择了config/config.js。

6. .env

整个项目的环境变量，Ant pro 项目中没有用到。

7. .env.local

本地化的系统环境变量，该文件通常不用提交到代码仓库。本地启动时， 相同内容 .env.local 会覆盖 .env 。

8. package.json

这个就不需要多说了。