对于一个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的文件都需要执行以上的步骤,否则依赖可能不更新