图片类网站建设,seol英文啥意思,如何申请注册企业邮箱,综合网站开发设计点击上方“开发者技术前线”#xff0c;选择“星标”18#xff1a;30 在看 真爱作者#xff1a;Tamic | 编辑#xff1a; 可可阿里之前开源#xff1a;阿里闲鱼开源 Flutter 应用框架 Fish Redux#xff01; 今天介绍的是前端React 框架- UmiJS。介绍umi官方宣称是一个… 点击上方“开发者技术前线”选择“星标”1830 在看 真爱作者Tamic | 编辑 可可阿里之前开源阿里闲鱼开源 Flutter 应用框架 Fish Redux 今天介绍的是前端React 框架- UmiJS。介绍umi官方宣称是一个可插拔的企业级 react 应用框架。umi 以路由为基础的支持类 next.js 的约定式路由以及各种进阶的路由功能并以此进行功能扩展比如支持路由级的按需加载。然后配以完善的插件体系覆盖从源码到构建产物的每个生命周期支持各种功能扩展和业务需求目前内外部加起来已有 50 的插件。umi 是蚂蚁金服的底层前端框架已直接或间接地服务了 600 应用包括 支持java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户同时希望他也能服务好外部用户。特性? 开箱即用内置 react、react-router 等? 类 next.js 且功能完备的路由约定同时支持配置的路由方式? 完善的插件体系覆盖从源码到构建产物的每个生命周期? 高性能通过插件支持 PWA、以路由为单元的 code splitting 等? 支持静态页面导出适配各种环境比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等? 开发启动快支持一键开启 dll 和 hard-source-webpack-plugin 等? 一键兼容到 IE9基于 umi-plugin-polyfills? 完善的 TypeScript 支持包括 d.ts 定义和 umi test? 与 dva 数据流的深入融合支持 duck directory、model 的自动加载、code splitting 等等架构图从源码到上线的生命周期管理市面上的框架基本都是从源码到构建产物很少会考虑到各种发布流程而 umi 则多走了这一步。下图是 umi 从源码到上线的一个流程。umi 首先会加载用户的配置和插件然后基于配置或者目录生成一份路由配置再基于此路由配置把 JS/CSS 源码和 HTML 完整地串联起来。用户配置的参数和插件会影响流程里的每个环节。他和 dva、roadhog 是什么关系简单来说roadhog 是基于 webpack 的封装工具目的是简化 webpack 的配置umi 可以简单地理解为 roadhog 路由思路类似 next.js/nuxt.js辅以一套插件机制目的是通过框架的方式简化 React 开发dva 目前是纯粹的数据流和 umi 以及 roadhog 之间并没有相互的依赖关系可以分开使用也可以一起使用个人觉得 umi dva 是比较搭的为什么不是...?next.jsnext.js 的功能相对比较简单比如他的路由配置并不支持一些高级的用法比如布局、嵌套路由、权限路由等等而这些在企业级的应用中是很常见的。相比 next.jsumi 在约定式路由的功能层面会更像 nuxt.js 一些。roadhogroadhog 是比较纯粹的 webpack 封装工具作为一个工具他能做的就比较有限(限于 webpack 层)。而 umi 则等于 roadhog 路由 HTML 生成 完善的插件机制所以能在提升开发者效率方面发挥出更大的价值。安装入门非常简单e# 新建页面$ umi generate page index# 本地开发$ umi dev# 构建上线$ umi build环境准备首先得有 node并确保 node 版本是 8.10 或以上。(mac 下推荐使用 nvm 来管理 node 版本)$ node -v8.1x推荐使用 yarn 管理 npm 依赖并使用国内源(阿里用户使用内网源)。# 国内源$ npm i yarn tyarn -g# 后面文档里的 yarn 换成 tyarn$ tyarn -v# 阿里内网源$ tnpm i yarn ali/yarn -g# 后面文档里的 yarn 换成 ayarn$ ayarn -v然后全局安装 umi并确保版本是 2.0.0 或以上。$ yarn global add umi$ umi -v2.0.0脚手架先找个地方建个空目录。$ mkdir myapp cd myapp然后通过 umi g 创建一些页面$ umi g page index$ umi g page usersumi g 是 umi generate 的别名可用于快速生成 component、page、layout 等并且可在插件里被扩展比如 umi-plugin-dva 里扩展了 dva:model然后就可以通过 umi g dva:model foo 快速 dva 的 model。然后通过 tree 查看下目录(windows 用户可跳过此步)$ tree.└── pages ├── index.css ├── index.js ├── users.css └── users.js这里的 pages 目录是页面所在的目录umi 里约定默认情况下 pages 下所有的 js 文件即路由如果有 next.js 或 nuxt.js 的使用经验应该会有点眼熟吧。然后启动本地服务器$ umi dev约定式路由启动 umi dev 后大家会发现 pages 下多了个 .umi 的目录。这是啥这是 umi 的临时目录可以在这里做一些验证但请不要直接在这里修改代码umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。然后我们在 index 和 users 直接加一些路由跳转逻辑。先修改 pages/index.js import Link from umi/link;import styles from ./index.css;export default function() { return ( Page index Link to/usersgo to /usersLink );}再修改 pages/users.js import router from umi/router;import styles from ./index.css;export default function() { return ( Page index { router.goBack(); }}go back );}然后浏览器验证应该已经可以在 index 和 users 两个页面之间通过路由跳转了。部署发布构建执行 umi build$ umi buildDONE Compiled successfully in 1729msFile sizes after gzip: 68.04 KB dist/umi.js 83 B dist/umi.css构建产物默认生成到 ./dist 下然后通过 tree 命令查看(windows 用户可忽略此步)$ tree ./dist./dist├── index.html├── umi.css└── umi.js本地验证发布之前可以通过 serve 做本地验证$ yarn global add serve$ serve ./distServing!- Local: http://localhost:5000- On Your Network: http://{Your IP}:5000Copied local address to clipboard!访问 http://localhost:5000正常情况下应该是和 umi dev 一致的。部署本地验证完就可以部署了这里通过 now 来做演示。$ yarn global add now$ now ./dist Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng Synced 3 files (301.93KB) [2s] https://dist-jtckzjjatx.now.sh [in clipboard] [1s] Deployment complete!然后打开相应的地址就能访问到线上的地址了。测试与配置检查测试umi 内置了基于 jest 的测试工具 umi-test $ umi testOptions: --coverage indicates that test coverage information should be collected and reported in the output配置检查使用 umi inspect 列出配置项的内容用以检查$ umi inspectOptions: --mode specify env mode (development or production, default is development) --rule inspect a specific module rule --plugin inspect a specific plugin --rules list all module rule names --plugins list all plugin names --verbose show full function definitions in outpu官方文档中文文档https://umijs.org/zh/Githubhttps://github.com/umijs/umiEND开发者技术前线 汇集技术前线快讯和关注行业趋势大厂干货是开发者经历和成长的优秀指南。历史阅读互联网江湖从此再无 BAT当年的三本学渣最后 6 家大厂还不是随便进了学不动了 京东跨端移动开发平台 Ares 发布喜欢就点个好看吧
