ant谱系简单介绍

  • dva
    dva是2个机遇react和redux的轻量级框架,其命令工具为dva-cli,官网/Github,概念来自elm,援救side
    effects、热替换、动态加载、react-native、SS奥迪Q三等。近来已在Ali当中广泛应用于蚂蚁金服业务。
  • ant-init
    依照dva的2个升格版本,近来仅还不安静,首要用来demo项目,教程,Github;
  • atool-build
    依照webpack壹的一个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
v肆真的是将前端路由发挥的很好,能够很灵活的安顿,包罗按需加载、事件监听等等,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
….. 3一.async.js,几13个公文真的逼死性冷淡。作者想自身又要吐弃了。

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

以此小编就觉着很不得已了,roadhog也很好,为啥放到docker上运转npm run
build就挂起了吗,英特网提了难点,最终照旧自问自答,发掘二.三.0就能够那样,依然要降到二.2.0。作者想要么甩掉把。

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

幸幸苦苦项目算是跑起来了,能够以为到打包运维时刻好长啊,果然做开垦照旧要配一个好点的Computer,不过,作者决定大概抛弃了。

dva

dva是基于react周围组件库的多少个运用框架,集成了包罗redux,redux-saga,react-router等,并且本人提供了一套语法标准和目录结构;
各个急需看的文书档案:

  • 理解 dva 的 8
    个概念
    ,以及她们是什么串起来的
  • 掌握 dva 的所有
    API
  • 查看 dva
    知识地图
    ,包涵 ES6, React, dva 等具有基础知识

代码在这里

dva-cli

dva-cli可以赶快生成一套前端项目模板,里面早已定义好了全亲人桶内的种种npm包;

webpack4:不是看中它宣传的零配置,真的打包速度比前多少个版本快许多,记得单独安装webpack-cli。

roadhog

roadhog是2个遵照webpack的工具,它能够提供开采服务器,并且封装了webpack的部分功效,也提供包装和测试等;

mobx:TypeScript包容上比较好,能够感到到更轻一点。

react

2个视图框架,基本观点是v=f(s),2个页面视图就是多少个状态机,根据事态的例外来展现出分歧的标准而已;
正视组件化和纯函数。

react-router v四:看看文档配置起来的确很好用。

其他

除了上边写的几个一直关系的,还有个别外层的文化必要看的,比如但不防止:

  • es伍,es6,es7,es八(一年1个本子,厉害了)
  • Node.js
  • npm
  • webpack
  • 纯函数编制程序

再外层的知识小编就不列举了。下边包车型大巴链接的内容,很重视,须要点开给个链接去看;上面别的中间的能看懂基本就基本上了啊。。。

axios:fetch也不用啦,哪个小用哪个。

async/await:一时半刻拿它代替一下saga,以为够用。

各个本子先升到新型的,一般的话新本子众多会做品质优化。

webpack:webpack4放弃了CommonsChunkPlugin,引入了optimization.splitChunks,还有optimization.runtimeChunk,搭配HtmlWebpackPlugin
用比较好。

TypeScript的加载器有四个,awesome-typescript-loader
ts-loader,笔者相比较帮衬于前八个,越来越快。不过本身的类别中用了ts-loader,因为引进了antd,为了不用bable,笔者用ts-import-plugin加载样式,在各类版本的尝试下,用时尚版的awesome-typescript-loader充足最新版的antd并不能够很好的加载antd的体制。

antd的版本若是三.0以前要在tsconfig.json中加"allowSyntheticDefaultImports": true

tsconfig.json:主假如有个别ts语法调换的安顿,有点像bable所做的政工,可是我不想用bable,在管理async/await的时候,要加上"lib": ["es6", "dom"]

发多少个包,方便用。假若你想尝试一下

  • npm install -g rwt-cli
  • rwt init <name>
  • cd <name>
  • npm install
  • npm start翻开版本 rwt -v or rwt --version 目前是1.1.6

无妨好说的,依然看代码吧,要是您认为能够优化也能够github:

相关文章