Umi脚手架

对于一个React工程来说,我们需要React,React-Router,Webpack,Typescript,Babel,CSSModules,Webpack-Dev-Server,按需加载Chunk,js压缩与混淆等等的安装与配置,才能开始启动一个工程,这实在是太麻烦了。

而且Umi提倡约定大于配置的开发方式,我们基本不需要动配置,就能实现路由注册,全局css文件,按需加载等的功能,值得一用

它会在dist文件夹生成以上的文件

我们就能看到dist文件的index.html的确发生变化了

Umi的路由使用最先匹配原则,在路由列表里面最先匹配到的路由,就会马上执行,剩下的路由则会略过。所以,打开/user,和/user/edit页面,他们都是显式用户页面。

exact为false,采取的前缀匹配原则,exact为true(默认值),采取的是完全匹配的原则

路由里面的title属性默认会改写浏览器标题

这个时候,list1与list2的外面都有layout包围了。我们看到wrapper与layout都很相似,他们都是在组件外面用另外一层组件包围,他们的区别在于:

我们就会发现不显示list4组件了,只显示layout组件。因为layout组件是放在list4组件前面的,根据最先匹配原则,即使它的嵌套routes没有匹配到,依然会正常显示layout组件,而不是显示list4组件。

另外一个方便的方法是:

值得注意的是,当页面是从主页push到/dog页面的,state对象会有信息

但是从/cat页面返回到/dog页面的时候,state对象就是空的

Umi的一个方法是,使用约定式路由,不需要手动再写routes数组了,方便多了

.├──layouts│└──index.tsx├──pages│├──404.tsx│├──cat.tsx│├──index.less│├──index.tsx│└──user│├──_layout.tsx│├──edit.tsx│└──index.tsx└──wrappers└──auth.tsx4directories,9files页面的路径配置如上

那么,打开主页的时候会匹配@/pages/index文件

打开/cat路径的时候匹配@/pages/cat文件

打开/user路径的时候匹配@/pages/user/index文件

打开/user/edit路径的时候匹配@/pages/user/edit文件

最后404页面,就是路由匹配错误的页面了,没啥好说的,这个路径是Umi约定好,不能改

这样的约定方式还是相当直观的

相似地,你可以配置页面的其他属性

这个时候,你看到@pages下的页面都会自动切分为多个chunk,按需加载了

但是,更多情况,我们是希望直接连服务器,测试代码。另外一方面,前端跑在webpack-dev-server里面的localhost:8000,后端跑在其他端口或者其他端口上,这样可不能直接用ajax调用,怎么办?

umi提供了dev-server的proxy功能,就是接口的发送中转站。

在默认情况下,Umi使用类似node的方式查找模块,就是先查找当前目录的node_modules下的模块,如果没有找到该模块的话,不断递归查找到父级的node_modules下的模块。

但是,Umi有一个Alias配置能让我们更直接地指定特定模块的具体位置在哪里。

注意,现在alias里面的包,Umi是不负责进行编译的,所以不能在alias路径里面放入ts文件,而应该放入已经编译好的js文件。

但是我们会发现,编译时无法查找到这个模块。这是因为,打包时的模块查找是由Umi负责的,但是编译时的模块查找是由TypeScript负责的,我们需要填写正确的paths路径才能运行。

修改tsconfig.json,填写paths配置项,重启即可

可以看到输出的模板文件中,指向的静态资源文件加入了/static前缀,路由加入了/kk前缀。

然后我们在/user页面中就能测试到,index模块,与layout模块是在不同的组件中,但是他们依然可以使用useState来跨组件传递数据,这其实是在useModel中偷偷做了手脚实现的。

我觉得这个设计挺棒的,没有改变useState的语义,可以设置快照值,并拿出快照值的地方。仅仅将useAuthModel转换为useModel(‘auth’)就能实现全局的状态共享,而不是组件内部的状态共享。

src/models/里面的文件建议只包含useState,和自定义的方法,不要内嵌有useCallback,useEffect的这些方法,它们是不符合全局状态共享的使用规则的。

plugin-inital-state是在plugin-model上进一步包装,提供了初始状态的全局共享的方式。而plugin-model是需要src/models/中有对应的hooks文件中才会打开的(默认是关闭的),因此,在使用plugin-inital-state的时候要注意,先在src/models中新增任意的hooks文件才能正常使用

npmruntest执行npmruntest就能执行单元测试了

一般的测试方法就是find对象,然后toEqual就可以了。

还有另外一种方法是使用snapShot测试,比较特别,它会在首次测试的时候,将结果输出到__snapshots__目录下。下次测试的时候,检查snapshots的结果是否一致,这种方法相当适合来做回归测试。

FIXME,这里没成功,依然采用asyncGenerator,而不是浏览器原生的async/await

我们有时候需要更新依赖,在umi中我们需要这样做:

以上的每一步缺一不可,否则依赖不会更新

如果我们需要在线调试依赖包,需要遵循以下的步骤

每次修改node_modules的文件都需要执行以上的步骤,否则依赖可能不更新

THE END
1.fix:编译·cb74ad584cprojectlibrary显示统计 下载Patch 文件 下载Diff 文件 展开所有文件 折叠所有文件 ts common-connection.jscommon-data.d.tscommon-data.jscommon-interior-finish.jscommon-multiple.d.tscommon-multiple.jscore-algebra-engine.d.tscore-algebra-engine.js 2 ts/common-connection.js 查看文件 文件差异因一行或多行过https://gitea.7zcloud.com/design/project-library/commit/cb74ad584c83260093bc4e28e0d3265cb6ad7751
2.UMI创建react目录介绍及配置umijs打包目录配置用UMI创建项目会自动生成。 7) app.ts 运行时配置文件,可以在这里扩展运行时的能力,比如修改路由、修改 render 方法等。需手动创建,非必需。 UMI 配置 Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件,支持 es6。一份常见的配置如下, export default { base: '/docs/', publicPath: '/static/',https://blog.csdn.net/yalywq/article/details/128966961
3.20240418Umi配置文件简读叶乘风Umi配置文件通常为.umirc.js或者config/config.js,这两个文件的作用是相同的,两个文件都存在时会优先加载 `.umirc.js`,请只使用其中一个来作为配置项!以下是其常见配置项: 官方给出的配置文档:https://umijs.org/docs/api/config import { defineConfig }from"umi";//使用 defineConfig 包裹配置是为了在书https://www.cnblogs.com/iuniko/p/18143498
4.目录及约定UmiJS有这个文件时,会覆盖默认的 HTML 模板。 模板里需至少包含根节点的 HTML 信息, #src/pages/.umi 这是umi dev 时生产的临时目录,默认包含umi.js和router.js,有些插件也会在这里生成一些其他临时文件。可以在这里做一些验证,但请不要直接在这里修改代码,umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下https://v2.umijs.org/zh/guide/app-structure.html
5.umi"version": "3.4.19" @umijs/preset-built-in 负责注册umi命令 比如:umi generate tmp umi generate thttps://www.jianshu.com/p/83703a6a0865
6.请问umi没办法将静态资源单独打包到static文件夹,有遇到这个大家React 项目有使用 umi 构建的吗?请问 umi 没办法将静态资源单独打包到 static 文件夹,有遇到这个问题的吗?https://yq.aliyun.com/ask/498628/
7.umi如何将项目部署到服务器?Worktile社区将UMI项目部署到服务器的步骤如下: 第一步:准备服务器环境 购买一台云服务器,并登录服务器。 安装必要的软件,如Node.js、Git、Nginx等。 第二步:获取UMI项目代码 打开终端,进入你希望保存UMI项目代码的文件夹。 使用Git命令将UMI项目的代码克隆到本地。 https://worktile.com/kb/ask/1319052.html
8.umiumidev和build的时候在做什么?bin入口文件umi.js packages/umi/package.json, 根据文件入口会找到bin/umi.js packages/umi/bin/umi.js, 在这段代码中, 上面这代码如果是debugger模式的话,当输出日志、警告或错误信息时,同时输出这些方法的代码的堆栈信息,以便于调试和定位问题。 下面那代码没啥好说,直接require编译后dist文件夹下的cli.js https://www.pipipi.net/30003.html
9.umidev时无法找到layoutExports·Issue#5765·umijs/umi从umi g tmp 看来生成了 .umi 文件夹,但是 umi dev 时 无法找到 layoutExports 最小可复现仓库 相关环境信息 Umi 版本: 3.2.14 Node 版本: v12.16.2 操作系统: windows / mac os clpz299 added the type(bug) label Dec 2, 2020 clpz299 changed the title [Bug] umi dev 时 无法找到 layoutExpohttps://github.com/umijs/umi/issues/5765
10.UmiOCR图片和文档批量识别工具PS 本资源仅供给大家学习研究及参考借鉴美工之用,请勿用于商业和非法用途,均无任何技术支持,谢谢合作! Umi-OCR简单来说呢,这款软件是电脑端使用的识别图片和文档文字的,并且支持批量识别,有时候在工作或者学习当中,就需要https://www.zye.cc/soft/23141.html
11.umi开启mfsu和webpack5报错:doesnotexistincontainer.whileumi开启 mfsu 和 webpack5 后报错:load component failed Error: Module "./@ant-design/pro-card" does not exist in container. while loading "./@ant-design/pro-card" from https://cloud.tencent.com/developer/article/2317816
12.umiUmijs官方插件`plugin不支持直接修改的。.umi文件夹是运行时阶段自动生成的,也不建议去改。 “默认的绝对路径是根据容器路径来的,我在宿主机进行开发,需要修改为相对路径” 看你需求是直接容器里启动web 服务吗? 或者考虑下容器内部的文件映射出来,至宿主机你想要的地方即可(或者就是这么个路径:/migdat_frontend/migdat_web)。 有用https://segmentfault.com/q/1010000042536340/a-1020000042536539
13.umijs添加自定义区块(使用自定义git地址)yarn add umi-plugin-pro-block@1.3.2 该插件的功能是:https://www.npmjs.com/package/umi-plugin-pro-block 控制区块的请求方法是否和本项目一致 是否移动mock文件到外层文件夹 是否移动service文件到外层文件夹 是否自动添加到路由和menu 设置插件 ./config/config.js # plugins 添加一个plugin https://blog.51cto.com/u_12938033/3738205