不 eject 的前提下扩展 create-react-app 的配置?

2020-05-28 14:53:18 +08:00
 xiaoming1992

本人react菜鸡, 现在开新项目的时候遇到困难了, 希望大佬指点。

我希望能简便地扩展cra的配置,然而就一个很简单的lesscss module, 同时支持.less.module.less, 我没有找到一个用的比较舒服的方法。

  1. eject是我最抵触的, 相当于放弃了跟cra共同进步的机会, 自己维护一套config
  2. react-app-rewired与 1 的区别仅仅是将维护react-scripts交给了react-app-rewired的团队, 我不相信他们能做得比facebook
  3. next.js号称开箱即用, 但如果需要支持less, 需要next-less, 而next-less对于cssModule只有true/false, 而不是像 webpack 那样根据文件名后缀选择相应的 loader(至少next-less项目的 readme.md 中没有提到)
  4. 我的目的绝不单单是支持一个 less

我希望的是类似于webpack-chain那样(在不 eject 的前提下)的来扩展cra, 但是好像没找到这方面的资料。不eject的前提下扩展cra的配置, 有没有比较好的实践?

4623 次点击
所在节点    React
50 条回复
fancy2020
2020-05-28 16:57:33 +08:00
上边怎么一堆讨论 sass 好不好的,楼主想说的是 create-react-app 的可配置性的问题啊..
claneo
2020-05-28 17:10:45 +08:00
react-app-rewired 与 1 的区别仅仅是将维护 react-scripts 交给了 react-app-rewired 的团队, 我不相信他们能做得比 facebook 好
---------
关于这一点我想说一句,react-scripts 可不能用仅仅,cra 初始化之后的项目里面,react-scripts 这个包就包含了所有与开发有关的依赖和配置。react-app-rewired 只是覆盖了 react-scripts 里的几个入口文件,而这几个文件都是功能单一并且万年不更新的,还是可以值得信任的
xiaoming1992
2020-05-28 17:37:35 +08:00
@fanchangyong 刚刚试用了一下 2 楼说的 craco,说实话,乍一看还是挺符合我的预期的,但是我感到很奇怪的一点是,他暴露出来的接口跟 webpack 原本的接口竟然不一致。。。比方说在 webpack 中,alias 属性位于 exportObject.resolve.alias,可是 craco 暴露出来的接口中,该属性却位于 exportObject.webpack.alias,resolve 属性没了。。。所以用着用着,感觉不对劲了,react-scripts 封装一次,craco 再封装一次,给我一种很大的不安全感,估计确实得回到手撸 webpack 了。

倒不是手撸 webpack 多难(虽然确实不容易),而是我考虑的肯定没有 cra 团队那么全面,如果能直接使用 cra,就能受益于 cra 的每一次更新,这才是我的本意。
xiaoming1992
2020-05-28 17:40:10 +08:00
@claneo 我倒不是说 react-script 仅仅怎么样,而是说,如果我采用 react-app-rewired,就是将“维护 react-script”的工作,从我手里转移到 react-app-rewired 团队,而我们两者,都不如 cra 团队实力强。。。
fancy2020
2020-05-28 18:28:05 +08:00
@xiaoming1992 越来越觉得用别人的轮子很多时候不太方便,所以现在自己造的轮子越来越多了。。
claneo
2020-05-28 18:32:26 +08:00
@xiaoming1992 哦抱歉我把你说的话看歪了。我想说的是 react-script 是 react-app-rewired 的一个依赖,react-app-rewired 只是覆盖了几个入口文件,其他部分都是从 react-script 引入的,所以 react-script 有什么更新 react-app-rewired 直接就能用上,react-app-rewired 本身并不需要频繁更新
momocraft
2020-05-28 18:38:10 +08:00
"cra 团队实力强" 可是他们的配置你也不信啊, 早 eject 早解脱
tyrealgray
2020-05-28 18:39:02 +08:00
craco 可以做,但是作为一个 spa,完全想不到有什么需要 override 的地方,CRA 已经封的很好了。
momocraft
2020-05-28 18:43:16 +08:00
另外 node-sass 语法比 sass 最新版落后些, 可以考虑切换到 (dart-) sass
VDimos
2020-05-28 18:46:42 +08:00
react-app-rewired 和 eject 一样难用,不是很懂 react 团队为什么在这个配置上面设计得如此难用
gouflv
2020-05-28 18:47:25 +08:00
craco 用过几次,还是很难受,现在主要开发 antd,所以 umi 勉强用用
royzxq
2020-05-28 19:56:33 +08:00
讲个笑话,create-react-app 整好了最佳配置 。

不是吧阿 sir, @vue/cli ng-cli 没用过吗
royzxq
2020-05-28 19:57:00 +08:00
cra 是我用过的最差的官方 cli,没有之一。
早日自己配置 /umi 早日解脱
xiaoming1992
2020-05-28 19:58:15 +08:00
@claneo 我还真没仔细看,我还以为 react-app-rewired 是 fork 的 react-script 呢。

@tyrealgray 我倒是有很多需要覆盖的,比方说上面说的 less modele,再比方说我现在的项目是 dev 时不使用 eslint-loader,prod 时使用 eslint-loader,比方说 eslint 配置中声明使用 webpack 配置中的 import/resolve,等等等等,都是 cra 做不到的
yuanfnadi
2020-05-28 20:30:26 +08:00
可以试试看 umi
dodo2012
2020-05-28 20:33:44 +08:00
不得不说,react 这方面比 vue 差太多了,不,是比任何一个都差的多,ember,angular 哪个不比 react 这方面做的好
xiaoming1992
2020-05-28 21:48:11 +08:00
@dodo2012 没必要捧一踩一,再说 cra 和 react 是两个东西。
zhigang1992
2020-05-28 22:04:45 +08:00
patch-package
xiaoming1992
2020-05-28 22:05:07 +08:00
@weixiangzhe @gouflv @royzxq @yuanfnadi 稍微看了下 umi 的文档,貌似有一种约定式最佳实践的感觉,不管用不用,好像都值得学学,毕竟阿里出品。
xiaoming1992
2020-05-28 22:07:28 +08:00
@zhigang1992 涨姿势了,还有这种东西...还有看我 id

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/676317

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX