在文件和目录的组织上,umi 更倾向于选择约定的方式。

一个复杂应用的目录结构如下:

.
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录,基于 express
├── config/
├── config.js // umi 配置,同 .umirc.js,二选一
└── src/ // 源码目录,可选
├── layouts/index.js // 全局布局
├── pages/ // 页面目录,里面的文件即路由
├── .umi/ // dev 临时目录,需添加到 .gitignore
├── .umi-production/ // build 临时目录,会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1,任意命名,导出 react 组件
├── page1.test.js // 用例文件,umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
└── page2.js // 页面 2,任意命名
├── global.css // 约定的全局样式文件,自动引入,也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── app.js // 运行时配置文件
├── .umirc.js // umi 配置,同 config/config.js,二选一
├── .env // 环境变量
└── package.json

#ES6 语法

配置文件、mock 文件等都有通过 @babel/register 注册实时编译,所以可以和 src 里的文件一样,使用 ES6 的语法和 es modules 。

#dist

默认输出路径,可通过配置 outputPath 修改。

#mock

此目录下所有的 .js 文件(包括 _ 前缀的)都会被解析为 mock 文件。

比如,新建 mock/users.js,内容如下:

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

然后在浏览器里访问 http://localhost:8000/api/users 就可以看到 ['a', 'b'] 了。

如果想忽略 mock 文件夹下的部分文件,参考 mock.exclude 配置。

#src

约定 src 为源码目录,如果不存在 src 目录,则当前目录会被作为源码目录。

比如:下面两种目录结构的效果是一致的。

+ src
+ pages
- index.js
+ layouts
- index.js
- .umirc.js
+ pages
- index.js
+ layouts
- index.js
- .umirc.js

#src/layouts/index.js

注:配置式路由下无效。

全局布局,在路由外面套的一层路由。

比如,你的路由是:

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

如果有 layouts/index.js,那么路由就会变为:

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

#src/pages

注:配置式路由下无效。

约定 pages 下所有的 jsjsxts 和 tsx 文件即路由。关于更多关于约定式路由的介绍,请前往路由章节。

#src/pages/404.js

404 页面。注意开发模式下有内置 umi 提供的 404 提示页面,所以只有显式访问 /404 才能访问到这个页面。

#src/pages/document.ejs

有这个文件时,会覆盖默认的 HTML 模板

模板里需至少包含根节点的 HTML 信息,

<div id="root"></div>

#src/pages/.umi

这是 umi dev 时生产的临时目录,默认包含 umi.js 和 router.js,有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证,但请不要直接在这里修改代码,umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。

#src/pages/.umi-production

同 src/pages/.umi,但是是在 umi build 时生成的,umi build 执行完自动删除。

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

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

#src/global.(js|ts)

此文件会在入口文件的最前面被自动引入,可以在这里加载补丁,做一些初始化的操作等。

#src/global.(css|less|sass|scss)

此文件不走 css modules,且会自动被引入,可以在这里写全局样式,以及做样式覆盖。

#src/app.(js|ts)

运行时配置文件,可以在这里扩展运行时的能力,比如修改路由、修改 render 方法等。

#.umirc.(js|ts) 和 config/config.(js|ts)

编译时配置文件,二选一,不可共存。

#.env

环境变量配置文件,比如:

CLEAR_CONSOLE=none
BROWSER=none

这里定义的系统环境变量在整个umi-build-dev的生命周期里都可以被使用

#.env.local

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

UmiJS 目录及约定的更多相关文章

  1. Spring Boot 基础概述与相关约定配置

    今天打算整理一下 Spring Boot 的基础篇,这系列的文章是我业余时间来写的,起源于之前对微服务比较感兴趣,微服务的范畴比较广包括服务治理.负载均衡.断路器.配置中心.API网关等,还需要结合 ...

  2. (1-1)文件结构的升级(Area和Filter知识总结) - ASP.NET从MVC5升级到MVC6

    ASP.NET从MVC5升级到MVC6 总目录 MVC5项目结构 带有Areas和Filter的项目结构 一般来说,小的MVC项目是不考虑领域的,但是,如果是稍微复杂一点的项目,往往是需要领域这个概念 ...

  3. 纯手工搭建JSF开发环境(JSF2.2+maven+weblogic 12c/jboss EAP 6.1+)

    前言: JSF 2.X因为种种原因(我个人觉得主要是因为推出太晚),再加上EJB2之前的设计过于复杂,引起很多开发人员对官方解决方案的反感,即使EJB3后来做了大量改进,国内也很少有人对EJB3感兴趣 ...

  4. Linux文件权限;ACL;Setuid、Setgid、Stick bit特殊权限;sudo提权

    相关学习资料 http://blog.sina.com.cn/s/blog_4e2e6d6a0100g47o.html http://blog.csdn.net/aegoose/article/det ...

  5. Maven学习小结(一 初探)

    1.下载Maven,解压并设置到环境变量中 https://maven.apache.org/download.cgi 需要先设置“JAVA_HOME”,否则报错: 之后查看Maven版本成功: 1. ...

  6. 使用spm build 批量打包压缩seajs 代码

    一,安装环境 1.安装spm spm工具是基于node(nodejs的服务平台)的,因此我们需要先安装 node 和 npm 下载地址:http://nodejs.org/#download.下载完成 ...

  7. seajs打包部署工具spm的使用总结

    相信使用seajs的好处大家都是知道的,接触seajs好像是在半年前,当时还不知道页面阻塞问题,这里不带多余的话了. seajs实现了模块化的开发,一个网站如果分了很多很多模块的话,等开发完成了,发现 ...

  8. tomcat解析之简单web服务器(图)

    链接地址:http://gogole.iteye.com/blog/587163 之前有javaeyer推荐了一本书<how tomcat works>,今天晚上看了看,确实不错,第一眼就 ...

  9. ASP.NET从MVC5升级到MVC6

    1-1)文件结构的升级(Area和Filter知识总结) - ASP.NET从MVC5升级到MVC6   ASP.NET从MVC5升级到MVC6 总目录 MVC5项目结构 带有Areas和Filter ...

随机推荐

  1. Android RecyclerView SearchView基本用法1

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/82 背景: 做了很多年的app开发,貌似没见过没有搜索功能 ...

  2. Android Studio的安装及第一次启动时的配置

    Android Studio的安装及第一次启动时的配置 一.下载Android Studio 百度搜索“Android Studio" 点击中文社区进入,选择最新版本下载. 下载后双击安装包 ...

  3. Angular框架入门

    今天简单学习了AngularJS框架,在这里我想简单的总结一下我所了解的AngularJS和一些入门案例! 首先,我们要知道什么是AngularJS? AngularJS  诞生于2009年,由Mis ...

  4. 数据库死锁的问题,Deadlock found when trying to get lock; try restarting transaction at Query.formatError

    场景: 应用刚上线排除大批量请求的问题 线上多次出现的Deadlock found when trying to get lock错误 代码: async batchUpdate(skus, { tr ...

  5. navicat for mysql 连接 mysql 出现Client does not support authentication protocol requested by server解决方案

    一 .桌面左下角windows图标--搜索框内输入cmd,结果如图所示,点击cmd.exe,或者使用快捷键Windows键(在键盘上有个Windows标志的按键)+R输入cmd后回车. 二. 在出来的 ...

  6. java.lang.IllegalStateException: getOutputStream() has already been called 解决办法

    因为在使用的时候没有使用@ResponseBody这个注解,所以才会报上面的异常

  7. ELK收集windows服务器日志笔记

    一.软件版本 1.jdk-8u211-linux-x64.rpm 2.elasticsearch-6.8.1.rpm 3.logstash-6.8.1.rpm 4.kibana-6.8.1-x86_6 ...

  8. 【搬了一套别人的cf】

    自己打了一堆没保存瞬间全没了.... 没有继续写的欲望 https://www.cnblogs.com/tea-egg/p/11664350.html

  9. js获取select显示的值

    html代码: <select id="myid"> <option value ="1">one</option> < ...

  10. SpringBoot2.0 基础案例(15):配置MongoDB数据库,实现增删改查逻辑

    本文源码:GitHub·点这里 || GitEE·点这里 一.NoSQL简介 1.NoSQL 概念 NoSQL( Not Only SQL ),意即"不仅仅是SQL".对不同于传统 ...