This topic created in 2160 days ago, the information mentioned may be changed or developed.
本人react菜鸡, 现在开新项目的时候遇到困难了, 希望大佬指点。
我希望能简便地扩展cra的配置，然而就一个很简单的less的css module, 同时支持.less和.module.less, 我没有找到一个用的比较舒服的方法。
eject是我最抵触的, 相当于放弃了跟cra共同进步的机会, 自己维护一套configreact-app-rewired与 1 的区别仅仅是将维护react-scripts交给了react-app-rewired的团队, 我不相信他们能做得比facebook好next.js号称开箱即用, 但如果需要支持less, 需要next-less, 而next-less对于cssModule只有true/false, 而不是像 webpack 那样根据文件名后缀选择相应的 loader(至少next-less项目的 readme.md 中没有提到)- 我的目的绝不单单是支持一个 less
我希望的是类似于webpack-chain那样(在不 eject 的前提下)的来扩展cra, 但是好像没找到这方面的资料。不eject的前提下扩展cra的配置, 有没有比较好的实践?
 |
1
huntrue May 28, 2020
我不懂技术，完全看不明白你说的什么，我只是被你的头像吸引进来的
|
 |
2
Hellert May 28, 2020
试试 craco 这个包
|
 |
3
jecshcier May 28, 2020 via iPhone
之前用过，eject 了。后来弃了。这点上我我觉得 vue cli 做的好太多了。。。
|
 |
4
yyfearth May 28, 2020 via iPhone
Override CRA 的 webpack config 就是
自己搞不定用 customize-cra 也行 |
 |
5
rioshikelong121 May 28, 2020  1
react-app-rewired + customize-cra
|
 |
6
xiaoming1992 OP @jecshcier vue 也挺好，但是我不太喜欢模板语法，感觉不太`typescript`，更主要的是在等 vue 3.0 出来...
@yyfearth @rioshikelong121 不太像用 react-app-rewired + customize-cra, 因为这仅仅是将维护 react-scripts 交给了 react-app-rewired 的团队, 我不相信他们能做得比 facebook 好 |
 |
7
love May 28, 2020
CRA 设计上就不是个可以自由配置的结构，人家追求的就是给你整好了最佳配置让你别自己瞎搞。
|
 |
8
ericgui May 28, 2020 via Android
你可以试试 parceljs，只需要安装几个 babel 插件，简单配置一下，就行了。
非常简单，很适合不太想不太会折腾 webpack 的人 |
|
9
xiaoming1992 OP @Hellert 谢谢，初步瞄了一下，好像刚好就是我想要的，再仔细看看
|
|
10
xiaoming1992 OP |
 |
11
fancy2020 May 28, 2020 via iPhone
我记得好像没什么好办法，所以我当时是 eject 出来然后参考它的实现基本手撸了一套自己的。cra 这东西感觉用作 demo 或者非常小的临时项目还行，严肃点的我建议还是用别的
|
|
12
love May 28, 2020
@xiaoming1992 啥。。。sass 不好因为墙国下载不下来，这不是 sass 的问题是你的问题好吧
另外挂梯子不可能下载不下来，真下载不下来你可以去提 bug 。 |
 |
13
weixiangzhe May 28, 2020
可以试试 umi
|
 |
14
Aynamic May 28, 2020 via Android
@xiaoming1992 node-sass 可以配置镜像加速，有华为阿里的可以用，很快的
|
|
15
Aynamic May 28, 2020 via Android
https://mirrors.huaweicloud.com/ 左侧搜索 sass 有用法
|
 |
16
hantsy May 28, 2020
这一点说实话，React 应该学习 Angular，Angular 提供强大的 Angular Schematics （已经有项目用它来修改 cra 配置了 ）机制。现在 Angular 生态很多提供了 angular schematics 支持，使用时用 ng add 替代 npm install/yarn add, 除了安装相应的 Package， 还自动添加项目相关配置。
|
|
17
xiaoming1992 OP @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 配置的问题。 |
|
18
xiaoming1992 OP @fanchangyong 我跟你一样，参考他的实现手撸了一套适合自己的，可是就感觉很别扭，比方说他们那么大的团队，可能会不断地去支持 webpack 的新特性，如果能不 eject，在 cra 升级的时候，执行一句 yarn upgrade，再小修小补，就能获取 facebook 的团队积累，不是美滋滋？
|
 |
19
ChefIsAwesome May 28, 2020
自己配 webpack 吧。webpack 本身是个非常模块化的东西，没什么复杂的。主要是有些功能要同时配几个地方，就容易出错了。你可以想下 react 的 hook 是什么概念，然后自己写点代码给 webpack 套一层就行了。
webpack 本身也是个插件，可以自己写 node 调用它。一旦你跳出来它的框框，就豁然开朗了。 |
|
20
fancy2020 May 28, 2020
@xiaoming1992 我对于不 eject 就不能方便的覆盖它的配置也觉得非常匪夷所思，所以就是因为这一点，我觉得 create-react-app 没办法用在真实的大项目中，可配置化太低的话肯定会遇到大坑
|
|
21
fancy2020 May 28, 2020
上边怎么一堆讨论 sass 好不好的，楼主想说的是 create-react-app 的可配置性的问题啊..
|
 |
22
claneo May 28, 2020
react-app-rewired 与 1 的区别仅仅是将维护 react-scripts 交给了 react-app-rewired 的团队, 我不相信他们能做得比 facebook 好
--------- 关于这一点我想说一句，react-scripts 可不能用仅仅，cra 初始化之后的项目里面，react-scripts 这个包就包含了所有与开发有关的依赖和配置。react-app-rewired 只是覆盖了 react-scripts 里的几个入口文件，而这几个文件都是功能单一并且万年不更新的，还是可以值得信任的 |
|
23
xiaoming1992 OP @fanchangyong 刚刚试用了一下 2 楼说的 craco，说实话，乍一看还是挺符合我的预期的，但是我感到很奇怪的一点是，他暴露出来的接口跟 webpack 原本的接口竟然不一致。。。比方说在 webpack 中，alias 属性位于 exportObject.resolve.alias，可是 craco 暴露出来的接口中，该属性却位于 exportObject.webpack.alias，resolve 属性没了。。。所以用着用着，感觉不对劲了，react-scripts 封装一次，craco 再封装一次，给我一种很大的不安全感，估计确实得回到手撸 webpack 了。
倒不是手撸 webpack 多难（虽然确实不容易），而是我考虑的肯定没有 cra 团队那么全面，如果能直接使用 cra，就能受益于 cra 的每一次更新，这才是我的本意。 |
|
24
xiaoming1992 OP @claneo 我倒不是说 react-script 仅仅怎么样，而是说，如果我采用 react-app-rewired，就是将“维护 react-script”的工作，从我手里转移到 react-app-rewired 团队，而我们两者，都不如 cra 团队实力强。。。
|
|
25
fancy2020 May 28, 2020
@xiaoming1992 越来越觉得用别人的轮子很多时候不太方便，所以现在自己造的轮子越来越多了。。
|
|
26
claneo May 28, 2020
@xiaoming1992 哦抱歉我把你说的话看歪了。我想说的是 react-script 是 react-app-rewired 的一个依赖，react-app-rewired 只是覆盖了几个入口文件，其他部分都是从 react-script 引入的，所以 react-script 有什么更新 react-app-rewired 直接就能用上，react-app-rewired 本身并不需要频繁更新
|
 |
27
momocraft May 28, 2020
"cra 团队实力强" 可是他们的配置你也不信啊, 早 eject 早解脱
|
 |
28
tyrealgray May 28, 2020 via Android
craco 可以做，但是作为一个 spa，完全想不到有什么需要 override 的地方，CRA 已经封的很好了。
|
|
29
momocraft May 28, 2020
另外 node-sass 语法比 sass 最新版落后些, 可以考虑切换到 (dart-) sass
|
 |
30
VDimos May 28, 2020 via Android
react-app-rewired 和 eject 一样难用，不是很懂 react 团队为什么在这个配置上面设计得如此难用
|
 |
31
gouflv May 28, 2020 via iPhone
craco 用过几次，还是很难受，现在主要开发 antd，所以 umi 勉强用用
|
 |
33
royzxq May 28, 2020
cra 是我用过的最差的官方 cli，没有之一。
早日自己配置 /umi 早日解脱 |
|
34
xiaoming1992 OP @claneo 我还真没仔细看，我还以为 react-app-rewired 是 fork 的 react-script 呢。
@tyrealgray 我倒是有很多需要覆盖的，比方说上面说的 less modele，再比方说我现在的项目是 dev 时不使用 eslint-loader，prod 时使用 eslint-loader，比方说 eslint 配置中声明使用 webpack 配置中的 import/resolve，等等等等，都是 cra 做不到的 |
 |
35
yuanfnadi May 28, 2020
可以试试看 umi
|
 |
36
dodo2012 May 28, 2020
不得不说，react 这方面比 vue 差太多了，不，是比任何一个都差的多，ember，angular 哪个不比 react 这方面做的好
|
|
37
xiaoming1992 OP @dodo2012 没必要捧一踩一，再说 cra 和 react 是两个东西。
|
 |
38
zhigang1992 May 28, 2020 1
patch-package
|
|
39
xiaoming1992 OP |
|
40
xiaoming1992 OP @zhigang1992 涨姿势了，还有这种东西...还有看我 id
|
|
41
royzxq May 28, 2020
|
|
42
royzxq May 28, 2020
|
|
43
royzxq May 28, 2020 2
 |
|
44
xiaoming1992 OP @royzxq 强啊霸哥
|
|
45
dodo2012 May 28, 2020
@xiaoming1992 真不是踩不踩的，react 在开箱即用方面真的差太多了。
|
|
46
yyfearth May 29, 2020
@xiaoming1992 自己动手能力强 而且喜欢 webpack 就好办了
不然信任 react-app-rewired customize-cra craco 这种现成的 自己 require override CRA 的 webpack config 就好了 我就这这么做的 具体怎么做 参考 react-app-rewired customize-cra craco 的核心就好了 就是几个 require.cache[webpackConfigPath].exports = function 就是了 |
|
47
yuanfnadi May 29, 2020
@dodo2012 可以试试看 umi
1. 蚂蚁内部 3000+ 项目。 有人全职维护，不需要担心弃坑； 2. 内置了路由、构建、部署、测试。 3. 新建一个 page 目录，写一个 index.jsx 。就可以跑起来一个 react 页面。ts babel 路由，热更新，antd,less,css module 都不需要管。 |
 |
48
witcherhope May 29, 2020
不建议折腾 react-app-rewired， 建议 eject，升级无非就是相关 package 升级，升级前 diff 一下最新的 eject 包即可
|
 |
49
94 May 29, 2020 via iPhone
🤦🏻♂️你让我用 Stylus 的怎么办，之前学的时候就在想这个问题了。并不想 eject，然后多出来一堆东西
|
 |
50
LeoooY Jun 4, 2020
项目复杂、定制化多的就是应该 eject 出来，直接改 webpack 配置和绕一圈去搞 webpack 相比方便的多吧。而且 eject 出来的都是 js，又不是黑魔法，要改自己去读一下就知道是怎么回事了。
|
Select Language