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

一、为什么我要放弃dva

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

1.我想用TypeScript了

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

2.React-Router真的挺好用

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

3.webpack怎么配置

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

4.我要把代码放到docker上

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

5.东西太多就是卡

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

二、准备自己搭一个脚手架吧

代码在这里

1.先找一些性能好的插架兼容我的破电脑

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

mobx:TypeScript兼容上比较好,可以感觉更轻一点。

react-router v4:看看文档配置起来真的很好用。

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

async/await:暂且拿它代替一下saga,感觉够用。

2.各种版本各种坑

各种版本先升到最新的,一般来说新版本很多会做性能优化。

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

TypeScript的加载器有两个,awesome-typescript-loaderts-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"]

3.顺手发个npm包

发一个包,方便用。
如果你想尝试一下

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

没什么好说的,还是看代码吧,如果你觉得可以优化也可以
github:https://github.com/octopodcat/rwt
npm:https://www.npmjs.com/package/rwt-cli

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,907评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,546评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,705评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,624评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,940评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,371评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,672评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,396评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,069评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,243评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,847评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2 259

推荐阅读更多精彩内容