V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoming1992
V2EX  ›  React

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

  •  
  •   xiaoming1992 · 2020-05-28 14:53:18 +08:00 · 4289 次点击
    这是一个创建于 1400 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本人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的配置, 有没有比较好的实践?

    50 条回复    2020-06-04 13:18:47 +08:00
    huntrue
        1
    huntrue  
       2020-05-28 14:59:19 +08:00
    我不懂技术,完全看不明白你说的什么,我只是被你的头像吸引进来的
    Hellert
        2
    Hellert  
       2020-05-28 15:06:56 +08:00
    试试 craco 这个包
    jecshcier
        3
    jecshcier  
       2020-05-28 15:07:12 +08:00 via iPhone
    之前用过,eject 了。后来弃了。这点上我我觉得 vue cli 做的好太多了。。。
    yyfearth
        4
    yyfearth  
       2020-05-28 15:07:25 +08:00 via iPhone
    Override CRA 的 webpack config 就是
    自己搞不定用 customize-cra 也行
    rioshikelong121
        5
    rioshikelong121  
       2020-05-28 15:11:08 +08:00   ❤️ 1
    react-app-rewired + customize-cra
    xiaoming1992
        6
    xiaoming1992  
    OP
       2020-05-28 15:18:16 +08:00
    @jecshcier vue 也挺好,但是我不太喜欢模板语法,感觉不太`typescript`,更主要的是在等 vue 3.0 出来...


    @yyfearth @rioshikelong121 不太像用 react-app-rewired + customize-cra, 因为这仅仅是将维护 react-scripts 交给了 react-app-rewired 的团队, 我不相信他们能做得比 facebook 好
    love
        7
    love  
       2020-05-28 15:19:02 +08:00
    CRA 设计上就不是个可以自由配置的结构,人家追求的就是给你整好了最佳配置让你别自己瞎搞。
    ericgui
        8
    ericgui  
       2020-05-28 15:25:27 +08:00 via Android
    你可以试试 parceljs,只需要安装几个 babel 插件,简单配置一下,就行了。
    非常简单,很适合不太想不太会折腾 webpack 的人
    xiaoming1992
        9
    xiaoming1992  
    OP
       2020-05-28 15:27:28 +08:00
    @Hellert 谢谢,初步瞄了一下,好像刚好就是我想要的,再仔细看看
    xiaoming1992
        10
    xiaoming1992  
    OP
       2020-05-28 15:32:41 +08:00
    @love 如果他确实是最佳配置,我肯定不瞎搞。可是,css 功能不足,sass 每次下载 node-sass 总是煎熬,挂梯子都下不下来,要一个 less 的 css module 不过分吧,可是 cra 如果不进行扩展就实现不了。

    @ericgui 恰恰相反,我非常喜欢折腾 webpack,我只是认为自己的是野路子,想要站在 facebook 的肩上,扩展 cra,可是 cra 不让我好好的扩展。。。至于 parceljs,我确实没用过,可是感觉 webpack 挺好的,主要是用的人多,暂时不太想转...
    fancy2020
        11
    fancy2020  
       2020-05-28 15:39:00 +08:00 via iPhone
    我记得好像没什么好办法,所以我当时是 eject 出来然后参考它的实现基本手撸了一套自己的。cra 这东西感觉用作 demo 或者非常小的临时项目还行,严肃点的我建议还是用别的
    love
        12
    love  
       2020-05-28 15:53:55 +08:00
    @xiaoming1992 啥。。。sass 不好因为墙国下载不下来,这不是 sass 的问题是你的问题好吧
    另外挂梯子不可能下载不下来,真下载不下来你可以去提 bug 。
    weixiangzhe
        13
    weixiangzhe  
       2020-05-28 15:56:32 +08:00
    可以试试 umi
    Aynamic
        14
    Aynamic  
       2020-05-28 15:56:49 +08:00 via Android
    @xiaoming1992 node-sass 可以配置镜像加速,有华为阿里的可以用,很快的
    Aynamic
        15
    Aynamic  
       2020-05-28 15:58:11 +08:00 via Android
    https://mirrors.huaweicloud.com/ 左侧搜索 sass 有用法
    hantsy
        16
    hantsy  
       2020-05-28 16:20:04 +08:00
    这一点说实话,React 应该学习 Angular,Angular 提供强大的 Angular Schematics (已经有项目用它来修改 cra 配置了 )机制。现在 Angular 生态很多提供了 angular schematics 支持,使用时用 ng add 替代 npm install/yarn add, 除了安装相应的 Package, 还自动添加项目相关配置。
    xiaoming1992
        17
    xiaoming1992  
    OP
       2020-05-28 16:28:14 +08:00
    @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
        18
    xiaoming1992  
    OP
       2020-05-28 16:34:37 +08:00
    @fanchangyong 我跟你一样,参考他的实现手撸了一套适合自己的,可是就感觉很别扭,比方说他们那么大的团队,可能会不断地去支持 webpack 的新特性,如果能不 eject,在 cra 升级的时候,执行一句 yarn upgrade,再小修小补,就能获取 facebook 的团队积累,不是美滋滋?
    ChefIsAwesome
        19
    ChefIsAwesome  
       2020-05-28 16:37:02 +08:00
    自己配 webpack 吧。webpack 本身是个非常模块化的东西,没什么复杂的。主要是有些功能要同时配几个地方,就容易出错了。你可以想下 react 的 hook 是什么概念,然后自己写点代码给 webpack 套一层就行了。
    webpack 本身也是个插件,可以自己写 node 调用它。一旦你跳出来它的框框,就豁然开朗了。
    fancy2020
        20
    fancy2020  
       2020-05-28 16:56:04 +08:00
    @xiaoming1992 我对于不 eject 就不能方便的覆盖它的配置也觉得非常匪夷所思,所以就是因为这一点,我觉得 create-react-app 没办法用在真实的大项目中,可配置化太低的话肯定会遇到大坑
    fancy2020
        21
    fancy2020  
       2020-05-28 16:57:33 +08:00
    上边怎么一堆讨论 sass 好不好的,楼主想说的是 create-react-app 的可配置性的问题啊..
    claneo
        22
    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
        23
    xiaoming1992  
    OP
       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
        24
    xiaoming1992  
    OP
       2020-05-28 17:40:10 +08:00
    @claneo 我倒不是说 react-script 仅仅怎么样,而是说,如果我采用 react-app-rewired,就是将“维护 react-script”的工作,从我手里转移到 react-app-rewired 团队,而我们两者,都不如 cra 团队实力强。。。
    fancy2020
        25
    fancy2020  
       2020-05-28 18:28:05 +08:00
    @xiaoming1992 越来越觉得用别人的轮子很多时候不太方便,所以现在自己造的轮子越来越多了。。
    claneo
        26
    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
        27
    momocraft  
       2020-05-28 18:38:10 +08:00
    "cra 团队实力强" 可是他们的配置你也不信啊, 早 eject 早解脱
    tyrealgray
        28
    tyrealgray  
       2020-05-28 18:39:02 +08:00 via Android
    craco 可以做,但是作为一个 spa,完全想不到有什么需要 override 的地方,CRA 已经封的很好了。
    momocraft
        29
    momocraft  
       2020-05-28 18:43:16 +08:00
    另外 node-sass 语法比 sass 最新版落后些, 可以考虑切换到 (dart-) sass
    VDimos
        30
    VDimos  
       2020-05-28 18:46:42 +08:00 via Android
    react-app-rewired 和 eject 一样难用,不是很懂 react 团队为什么在这个配置上面设计得如此难用
    gouflv
        31
    gouflv  
       2020-05-28 18:47:25 +08:00 via iPhone
    craco 用过几次,还是很难受,现在主要开发 antd,所以 umi 勉强用用
    royzxq
        32
    royzxq  
       2020-05-28 19:56:33 +08:00
    讲个笑话,create-react-app 整好了最佳配置 。

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

    @tyrealgray 我倒是有很多需要覆盖的,比方说上面说的 less modele,再比方说我现在的项目是 dev 时不使用 eslint-loader,prod 时使用 eslint-loader,比方说 eslint 配置中声明使用 webpack 配置中的 import/resolve,等等等等,都是 cra 做不到的
    yuanfnadi
        35
    yuanfnadi  
       2020-05-28 20:30:26 +08:00
    可以试试看 umi
    dodo2012
        36
    dodo2012  
       2020-05-28 20:33:44 +08:00
    不得不说,react 这方面比 vue 差太多了,不,是比任何一个都差的多,ember,angular 哪个不比 react 这方面做的好
    xiaoming1992
        37
    xiaoming1992  
    OP
       2020-05-28 21:48:11 +08:00 via Android
    @dodo2012 没必要捧一踩一,再说 cra 和 react 是两个东西。
    zhigang1992
        38
    zhigang1992  
       2020-05-28 22:04:45 +08:00   ❤️ 1
    patch-package
    xiaoming1992
        39
    xiaoming1992  
    OP
       2020-05-28 22:05:07 +08:00
    @weixiangzhe @gouflv @royzxq @yuanfnadi 稍微看了下 umi 的文档,貌似有一种约定式最佳实践的感觉,不管用不用,好像都值得学学,毕竟阿里出品。
    xiaoming1992
        40
    xiaoming1992  
    OP
       2020-05-28 22:07:28 +08:00
    @zhigang1992 涨姿势了,还有这种东西...还有看我 id
    royzxq
        41
    royzxq  
       2020-05-28 22:34:48 +08:00
    royzxq
        42
    royzxq  
       2020-05-28 22:35:05 +08:00
    royzxq
        43
    royzxq  
       2020-05-28 22:39:56 +08:00   ❤️ 2
    xiaoming1992
        44
    xiaoming1992  
    OP
       2020-05-28 22:40:30 +08:00 via Android
    @royzxq 强啊霸哥
    dodo2012
        45
    dodo2012  
       2020-05-28 23:51:58 +08:00
    @xiaoming1992 真不是踩不踩的,react 在开箱即用方面真的差太多了。
    yyfearth
        46
    yyfearth  
       2020-05-29 05:45:25 +08:00
    @xiaoming1992 自己动手能力强 而且喜欢 webpack 就好办了
    不然信任 react-app-rewired customize-cra craco 这种现成的
    自己 require override CRA 的 webpack config 就好了
    我就这这么做的 具体怎么做 参考 react-app-rewired customize-cra craco 的核心就好了
    就是几个 require.cache[webpackConfigPath].exports = function 就是了
    yuanfnadi
        47
    yuanfnadi  
       2020-05-29 08:43:19 +08:00
    @dodo2012 可以试试看 umi

    1. 蚂蚁内部 3000+ 项目。 有人全职维护,不需要担心弃坑;
    2. 内置了路由、构建、部署、测试。
    3. 新建一个 page 目录,写一个 index.jsx 。就可以跑起来一个 react 页面。ts babel 路由,热更新,antd,less,css module 都不需要管。
    witcherhope
        48
    witcherhope  
       2020-05-29 09:51:39 +08:00
    不建议折腾 react-app-rewired, 建议 eject,升级无非就是相关 package 升级,升级前 diff 一下最新的 eject 包即可
    dfkjgklfdjg
        49
    dfkjgklfdjg  
       2020-05-29 18:45:28 +08:00 via iPhone
    🤦🏻‍♂️你让我用 Stylus 的怎么办,之前学的时候就在想这个问题了。并不想 eject,然后多出来一堆东西
    LeoooY
        50
    LeoooY  
       2020-06-04 13:18:47 +08:00
    项目复杂、定制化多的就是应该 eject 出来,直接改 webpack 配置和绕一圈去搞 webpack 相比方便的多吧。而且 eject 出来的都是 js,又不是黑魔法,要改自己去读一下就知道是怎么回事了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1404 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:35 · PVG 01:35 · LAX 10:35 · JFK 13:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.