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

[xiaoming1992]

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

我希望能简便地扩展cra的配置，然而就一个很简单的less的css 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的配置, 有没有比较好的实践?

[huntrue]

我不懂技术，完全看不明白你说的什么，我只是被你的头像吸引进来的

[Hellert]

试试 craco 这个包

[jecshcier]

之前用过，eject 了。后来弃了。这点上我我觉得 vue cli 做的好太多了。。。

[yyfearth]

Override CRA 的 webpack config 就是
自己搞不定用 customize-cra 也行

[rioshikelong121]

react-app-rewired + customize-cra

[xiaoming1992]

@jecshcier vue 也挺好，但是我不太喜欢模板语法，感觉不太`typescript`，更主要的是在等 vue 3.0 出来...


@yyfearth @rioshikelong121 不太像用 react-app-rewired + customize-cra, 因为这仅仅是将维护 react-scripts 交给了 react-app-rewired 的团队, 我不相信他们能做得比 facebook 好

[love]

CRA 设计上就不是个可以自由配置的结构，人家追求的就是给你整好了最佳配置让你别自己瞎搞。

[ericgui]

你可以试试 parceljs，只需要安装几个 babel 插件，简单配置一下，就行了。
非常简单，很适合不太想不太会折腾 webpack 的人

[xiaoming1992]

@Hellert 谢谢，初步瞄了一下，好像刚好就是我想要的，再仔细看看

[xiaoming1992]

@love 如果他确实是最佳配置，我肯定不瞎搞。可是，css 功能不足，sass 每次下载 node-sass 总是煎熬，挂梯子都下不下来，要一个 less 的 css module 不过分吧，可是 cra 如果不进行扩展就实现不了。

@ericgui 恰恰相反，我非常喜欢折腾 webpack，我只是认为自己的是野路子，想要站在 facebook 的肩上，扩展 cra，可是 cra 不让我好好的扩展。。。至于 parceljs，我确实没用过，可是感觉 webpack 挺好的，主要是用的人多，暂时不太想转...

[fancy2020]

我记得好像没什么好办法，所以我当时是 eject 出来然后参考它的实现基本手撸了一套自己的。cra 这东西感觉用作 demo 或者非常小的临时项目还行，严肃点的我建议还是用别的

[love]

@xiaoming1992 啥。。。sass 不好因为墙国下载不下来，这不是 sass 的问题是你的问题好吧
另外挂梯子不可能下载不下来，真下载不下来你可以去提 bug 。

[weixiangzhe]

可以试试 umi

[Aynamic]

@xiaoming1992 node-sass 可以配置镜像加速，有华为阿里的可以用，很快的

[Aynamic]

https://mirrors.huaweicloud.com/ 左侧搜索 sass 有用法

[hantsy]

这一点说实话，React 应该学习 Angular，Angular 提供强大的 Angular Schematics （已经有项目用它来修改 cra 配置了 ）机制。现在 Angular 生态很多提供了 angular schematics 支持，使用时用 ng add 替代 npm install/yarn add, 除了安装相应的 Package， 还自动添加项目相关配置。

[xiaoming1992]

@love https://danielwertheim.se/solution-to-issues-with-node-gyp-node-sass-on-windows/ https://github.com/nodejs/node-gyp/issues/1960
主要是, less 完全不会有这些问题, 而 sass 对比 less 并无不可逾越的优势。而且, 这并不是探讨 less 好还是 sass 好的问题, 而是 cra 如何优雅地使用 less module 的问题。

@fanchangyong
> cra 这东西感觉用作 demo 或者非常小的临时项目还行，严肃点的我建议还是用别的
有什么说法吗？我感觉 cra 还可以啊？

@Aynamic @Aynamic 谢谢, 可是我的问题并不是 less 还是 sass 的问题, 而是 cra 配置的问题。

[xiaoming1992]

@fanchangyong 我跟你一样，参考他的实现手撸了一套适合自己的，可是就感觉很别扭，比方说他们那么大的团队，可能会不断地去支持 webpack 的新特性，如果能不 eject，在 cra 升级的时候，执行一句 yarn upgrade，再小修小补，就能获取 facebook 的团队积累，不是美滋滋？

[ChefIsAwesome]

自己配 webpack 吧。webpack 本身是个非常模块化的东西，没什么复杂的。主要是有些功能要同时配几个地方，就容易出错了。你可以想下 react 的 hook 是什么概念，然后自己写点代码给 webpack 套一层就行了。
webpack 本身也是个插件，可以自己写 node 调用它。一旦你跳出来它的框框，就豁然开朗了。

[fancy2020]

@xiaoming1992 我对于不 eject 就不能方便的覆盖它的配置也觉得非常匪夷所思，所以就是因为这一点，我觉得 create-react-app 没办法用在真实的大项目中，可配置化太低的话肯定会遇到大坑