xml地图|网站地图|网站标签 [设为首页] [加入收藏]

我决定放弃dva并自己搭一个基于TypeScript的脚手架

2019-11-26 16:33栏目:操作系统
TAG:

ant谱系简介

  • dva
    dva是一个机遇react和redux的轻量级框架,其命令工具为dva-cli,官网/Github,概念来自elm,支持side effects、热替换、动态加载、react-native、SSR等。目前已在阿里内部广泛应用于蚂蚁金服业务。
  • ant-init
    基于dva的一个升级版本,目前仅还不稳定,主要用于demo项目,教程,Github;
  • atool-build
    基于webpack1的一个react脚手架工具,教程,Github
  • dva-cli +droa
    droa 一个实用web开发插件

  • roadhog
    roadhog 一个基于create-react-app可配的命令行工具,是约束型配置,基于 JSON 格式,给出有限的配置方式;atool-build + dora 是扩展型,表现为插件和编程 webpack.config.js 的方式。
    roadhog VS droa

PS:
项目开发须知:

  • droa 开发服务器,一个中型的插件话调试服务,插件有webpack、proxy、simulator等;
  • atool-build 打包工具
  • droa-plugin-webpack droa的插件,用于和atool-build整合
    补充:
  • antd-tools ,基于atool-build封装的开发ant-design用的工具
  • ant-tool,一个group的名字,内部包含了基础构建atool-build,测试atool-test、文档atool-doc等服务;

老实说,dva真的很好用,下载下来过后直接写业务逻辑代码就可以了,基本不用理会webpack如何配置,项目结构怎么设计,甚至我可以不用知道redux的数据流是怎样的、saga如何处理异步、react-router路由是什么,怎么按需加载,都可以开发,只要知道react语法就成功了一半,更开心的是,我可能用到的插件,在node_modules下一搜索,基本都有了,简直不要太方便,然而,我还是有不得不放弃的理由。

antd是蚂蚁金服团队出的一个中台设计语言,官方是这样说的:

突然想用TypeScript重构一下项目,怕以后业务越来复杂,项目越来越大,之前写的会忘记。dva是支持TypeScript的,但是配置路由中,因为使用了dva/dynamic,总会有一些奇奇怪怪的报错信息,最后找到了最佳的实践方法,就是把Umi引入进来,之前看官方说的类nextjs的框架,果断放弃了,因为我用不到,用了之后才知道,嗯……类似nextjs结构吧,和nextjs好像没有太多相同之处,因为dva+umi+roadhog才是一个完整的页面+路由+服务的最佳实践。我的项目感觉越来越大了,我想我要放弃了。

Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行 UE 设计和 UI 设计人员统称为『设计者』,利用统一的规范进行设计赋能,全面提高中台产品体验和研发效率。

React-Router v4真的是将前端路由发挥的很好,可以很灵活的配置,包括按需加载、事件监听等等,dva也很好,把路由的核心都放在了一起,但是类如我想在Route里面写render好像变难了,不能把models注入里面。一些看似鸡肋,有时候很好用的功能在dva里面变得更难了,我想我要放弃了。

而我们常说的antd其实指的是官方出的Ant Design of React这个UI框架(当然现在也出了Angular的版本NG-ZORRO),具体的组件地址可以参见:
Ant Design of React

webpack零配置啊,这点真的是省了很多查看各种loader和插件版本问题的时间,按需加载这种也不用去翻文档了,一个true就可以,但是越是封装的好,可灵活配置的就越少.webpackrc文件可以配置的也不多。打包dist下生成0.async.js ..... 31.async.js,几十个文件真的逼死强迫症。我想我又要放弃了。

本文所说的全家桶,具体有下面几个部分:

这个我就觉得很无奈了,roadhog也很好,为什么放到docker上运行npm run build就挂起了呢,网上提了问题,最后还是自问自答,发现2.3.0就会这样,还是要降到2.2.0。我想还是放弃把。

  1. UI组件库:antd
  2. 应用框架:dva
  3. 开发工具:dva-cli、roadhog
  4. 视图框架:React.js,和它的各种配套组件库。。。

幸幸苦苦项目算是跑起来了,可以感觉打包运行时间好长啊,果然做开发还是要配一个好点的电脑,不过,我决定还是放弃了。

dva

dva是基于react周边组件库的一个应用框架,集成了包括redux,redux-saga,react-router等,并且自己提供了一套语法规范和目录结构;
各种需要看的文档:

  • 理解 dva 的 8 个概念 ,以及他们是如何串起来的
  • 掌握 dva 的所有 API
  • 查看 dva 知识地图 ,包含 ES6, React, dva 等所有基础知识

代码在这里

dva-cli

dva-cli可以迅速生成一套前端项目模板,里面已经定义好了全家桶内的各种npm包;

版权声明:本文由必发88手机在线官网发布于操作系统,转载请注明出处:我决定放弃dva并自己搭一个基于TypeScript的脚手架