UmiJS 3.X实战从头开始(二):如何使用

凡所有相

1. 需要了解的目录及文件:

  • src/.umi目录

建立第一个 Umi 项目并启动后,可能会有一个疑问:这个项目的启动文件在哪呢?一般来说,我们通过 React 的脚手架建立的项目中,在src文件夹的根目录会有一个index.js文件,在index.js里我们通过 ReactDOMrender 命令来启动项目。然而在 Umi 的项目中,src根目录下并没有index.js文件,也找不到 render 这样的指令代码。

查看 package.json 文件里的 start 命令,我们知道项目的是通过umi指令启动的,而umi启动的入口文件,其实就是 src/.umi/umi.ts

从官网的文档我们可以了解到,.umi是一个临时文件夹,.umi 临时目录是整个 Umi 项目的发动机,入口文件、路由等等都在这里,这些是由 umi 内部插件及三方插件生成的。

同时,临时文件是 Umi 框架中非常重要的一部分,框架或插件会根据你的代码生成临时文件,这些原来需要放在项目里的脏乱差的部分都被藏在了这里。因为他的临时性,每次启动 umi 时都会被删除并重新生成。

  • .umirc.ts

项目的基础配置则是放在项目根目录的.umirc.ts文件中。如果需要多平台复杂配置,则不用.umirc.ts文件,在根目录下建立config文件夹,在文件夹下建立多个文件进行配置。例如以下示例:

image

当我们改变配置时,重新启动项目,src/.umi目录下的内容就会根据我们的配置重新生成,也就是说,这个入口文件夹里的内容是在我们编码过程中,根据我们的配置和插件内容的变化而动态变化生成的。

  • .env

环境变量,例如:

// 端口
PORT = 8001
  • src/global.tsx,src/global.less

另外我们还可以在src的根目录建立global.tsx,global.less这里两个文件,这两个文件默认会在项目启动前被引入,global.less可以放置一些全局的样式,global.tsx可以处理一些全局性的异步事件等。

例如,在global.less里,可以对html,body,以及根节点 root 做一些样式设置:

...
html,
body,
#root {
  height: 100%;
}

.ant-layout {
  min-height: 100vh;
}
...
  • src/app.tsx

运行时配置文件,先于入口文件运行。

运行顺序:global.tsx > app.tsx > umi.ts

2. 约定化的思想:

以下内容转自:http://www.zyiz.net/tech/detail-140738.html

umi的很多东西都是约定式的。所谓约定式就是指,按照约定好的方式开发,就能达到某种效果,中间的过程由框架帮我们完成。例如:

  • 建一个 locales 目录,就拥有了国际化
  • 建一个 models 目录,就拥有了数据流
  • 建一个 mock 目录,就拥有了数据 mock
  • 建一个 access.ts 文件,就拥有了权限策略
  • ...

这看起来是非常黑盒非常酷的,用这种方式其实对于团队代码风格的统一是非常有好处的,直接在框架层面就约束了大家的目录组织模式,便于团队维护。

但是缺点也是挺明显的,灵活性不如配置式的高,因为只能按特定的模式来开发,如果原本约定的方式不满足业务需求,就需要额外开发 Umi 插件来魔改原本的功能。而且约定式的开发是相对其他框架来说很特别的一点,对新上手的同学来说需要时间去通读官网文档了解约定式的规则。


上一篇:UmiJS 3.X实战从头开始(一):安装Umi
下一篇:UmiJS 3.X实战从头开始(三):配置与运行时配置

阅读 132

有为法
前端知识边学边写,为自己积累,也希望能为别人解惑。

一切有为法 如梦幻泡影

512 声望
9 粉丝
0 条评论
你知道吗?

一切有为法 如梦幻泡影

512 声望
9 粉丝
宣传栏