ant谱系简单介绍

  • dva
    dva是一个机遇react和redux的轻量级框架，其命令工具为dva-cli,官网/Github，概念来自elm,支持side
    effects、热替换、动态加载、react-native、SSENCORE等。最近已在Ali之广东中国广播集团泛应用于蚂蚁金服业务。
  • 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，几10个文本真的逼死人格障碍。小编想自身又要放弃了。

本文所说的全家桶，具体有下边多少个部分：

其一自家就感到很不得已了，roadhog也很好，为啥放到docker上运维npm run
build就挂起了啊，英特网提了难点，最后依旧自问自答，发掘2.3.0就能这么，依然要降到2.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是叁个遵照webpack的工具，它能够提供开垦服务器，并且封装了webpack的局地效果，也提供包装和测验等；

mobx：TypeScript包容上相比好，能够感到更轻一点。

react

三个视图框架，基本观点是v=f(s),三个页面视图正是一个状态机，依照事态的不等来展现出不一致的规范而已；
器重组件化和纯函数。

react-router v4：看看文书档案配置起来确实很好用。

其他

除去上面写的多少个平素关系的，还会有个别外层的文化要求看的，举个例子但不限于：

  • es5,es6,es7,es8(一年一个本子，厉害了)
  • 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的版本假如3.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:

相关文章