Home Sign Up Sign In
› React
Advertisement
xiaoming1992
V2EX  ›  React

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

  •   
  •   xiaoming1992 · May 28, 2020 · 5996 views
    This topic created in 2350 days ago, the information mentioned may be changed or developed.

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

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


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

    @ericgui 恰恰相反，我非常喜欢折腾 webpack，我只是认为自己的是野路子，想要站在 facebook 的肩上，扩展 cra，可是 cra 不让我好好的扩展。。。至于 parceljs，我确实没用过，可是感觉 webpack 挺好的，主要是用的人多，暂时不太想转...
    fancy2020
    fancy2020
    May 28, 2020 via iPhone
    11
    我记得好像没什么好办法，所以我当时是 eject 出来然后参考它的实现基本手撸了一套自己的。cra 这东西感觉用作 demo 或者非常小的临时项目还行，严肃点的我建议还是用别的
    love
    love
    May 28, 2020
    12
    @xiaoming1992 啥。。。sass 不好因为墙国下载不下来，这不是 sass 的问题是你的问题好吧
    另外挂梯子不可能下载不下来，真下载不下来你可以去提 bug 。
    weixiangzhe
    weixiangzhe
    May 28, 2020
    13
    可以试试 umi
    Aynamic
    Aynamic
    May 28, 2020 via Android
    14
    @xiaoming1992 node-sass 可以配置镜像加速，有华为阿里的可以用，很快的
    Aynamic
    Aynamic
    May 28, 2020 via Android
    15
    https://mirrors.huaweicloud.com/ 左侧搜索 sass 有用法
    hantsy
    hantsy
    May 28, 2020
    16
    这一点说实话，React 应该学习 Angular，Angular 提供强大的 Angular Schematics （已经有项目用它来修改 cra 配置了 ）机制。现在 Angular 生态很多提供了 angular schematics 支持，使用时用 ng add 替代 npm install/yarn add, 除了安装相应的 Package， 还自动添加项目相关配置。
    xiaoming1992
    xiaoming1992
    OP
    May 28, 2020
    17
    @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
    xiaoming1992
    OP
    May 28, 2020
    18
    @fanchangyong 我跟你一样，参考他的实现手撸了一套适合自己的，可是就感觉很别扭，比方说他们那么大的团队，可能会不断地去支持 webpack 的新特性，如果能不 eject，在 cra 升级的时候，执行一句 yarn upgrade，再小修小补，就能获取 facebook 的团队积累，不是美滋滋？
    ChefIsAwesome
    ChefIsAwesome
    May 28, 2020
    19
    自己配 webpack 吧。webpack 本身是个非常模块化的东西，没什么复杂的。主要是有些功能要同时配几个地方，就容易出错了。你可以想下 react 的 hook 是什么概念，然后自己写点代码给 webpack 套一层就行了。
    webpack 本身也是个插件，可以自己写 node 调用它。一旦你跳出来它的框框，就豁然开朗了。
    fancy2020
    fancy2020
    May 28, 2020
    20
    @xiaoming1992 我对于不 eject 就不能方便的覆盖它的配置也觉得非常匪夷所思，所以就是因为这一点，我觉得 create-react-app 没办法用在真实的大项目中，可配置化太低的话肯定会遇到大坑
    fancy2020
    fancy2020
    May 28, 2020
    21
    上边怎么一堆讨论 sass 好不好的，楼主想说的是 create-react-app 的可配置性的问题啊..
    claneo
    claneo
    May 28, 2020
    22
    react-app-rewired 与 1 的区别仅仅是将维护 react-scripts 交给了 react-app-rewired 的团队, 我不相信他们能做得比 facebook 好
    ---------
    关于这一点我想说一句，react-scripts 可不能用仅仅，cra 初始化之后的项目里面，react-scripts 这个包就包含了所有与开发有关的依赖和配置。react-app-rewired 只是覆盖了 react-scripts 里的几个入口文件，而这几个文件都是功能单一并且万年不更新的，还是可以值得信任的
    xiaoming1992
    xiaoming1992
    OP
    May 28, 2020
    23
    @fanchangyong 刚刚试用了一下 2 楼说的 craco，说实话，乍一看还是挺符合我的预期的，但是我感到很奇怪的一点是，他暴露出来的接口跟 webpack 原本的接口竟然不一致。。。比方说在 webpack 中，alias 属性位于 exportObject.resolve.alias，可是 craco 暴露出来的接口中，该属性却位于 exportObject.webpack.alias，resolve 属性没了。。。所以用着用着，感觉不对劲了，react-scripts 封装一次，craco 再封装一次，给我一种很大的不安全感，估计确实得回到手撸 webpack 了。

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

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

    @tyrealgray 我倒是有很多需要覆盖的，比方说上面说的 less modele，再比方说我现在的项目是 dev 时不使用 eslint-loader，prod 时使用 eslint-loader，比方说 eslint 配置中声明使用 webpack 配置中的 import/resolve，等等等等，都是 cra 做不到的
    yuanfnadi
    yuanfnadi
    May 28, 2020
    35
    可以试试看 umi
    dodo2012
    dodo2012
    May 28, 2020
    36
    不得不说，react 这方面比 vue 差太多了，不，是比任何一个都差的多，ember，angular 哪个不比 react 这方面做的好
    xiaoming1992
    xiaoming1992
    OP
    May 28, 2020 via Android
    37
    @dodo2012 没必要捧一踩一，再说 cra 和 react 是两个东西。
    zhigang1992
    zhigang1992
    May 28, 2020❤️1
    38
    patch-package
    xiaoming1992
    xiaoming1992
    OP
    May 28, 2020
    39
    @weixiangzhe @gouflv @royzxq @yuanfnadi 稍微看了下 umi 的文档，貌似有一种约定式最佳实践的感觉，不管用不用，好像都值得学学，毕竟阿里出品。
    xiaoming1992
    xiaoming1992
    OP
    May 28, 2020
    40
    @zhigang1992 涨姿势了，还有这种东西...还有看我 id
    royzxq
    royzxq
    May 28, 2020❤️2
    43
    xiaoming1992
    xiaoming1992
    OP
    May 28, 2020 via Android
    44
    @royzxq 强啊霸哥
    dodo2012
    dodo2012
    May 28, 2020
    45
    @xiaoming1992 真不是踩不踩的，react 在开箱即用方面真的差太多了。
    yyfearth
    yyfearth
    May 29, 2020
    46
    @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
    yuanfnadi
    May 29, 2020
    47
    @dodo2012 可以试试看 umi

    1. 蚂蚁内部 3000+ 项目。 有人全职维护，不需要担心弃坑；
    2. 内置了路由、构建、部署、测试。
    3. 新建一个 page 目录，写一个 index.jsx 。就可以跑起来一个 react 页面。ts babel 路由，热更新，antd,less,css module 都不需要管。
    witcherhope
    witcherhope
    May 29, 2020
    48
    不建议折腾 react-app-rewired， 建议 eject，升级无非就是相关 package 升级，升级前 diff 一下最新的 eject 包即可
    94
    94
    May 29, 2020 via iPhone
    49
    🤦🏻‍♂️你让我用 Stylus 的怎么办，之前学的时候就在想这个问题了。并不想 eject，然后多出来一堆东西
    LeoooY
    LeoooY
    Jun 4, 2020
    50
    项目复杂、定制化多的就是应该 eject 出来，直接改 webpack 配置和绕一圈去搞 webpack 相比方便的多吧。而且 eject 出来的都是 js，又不是黑魔法，要改自己去读一下就知道是怎么回事了。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5712 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 114ms · UTC 03:12 · PVG 11:12 · LAX 19:12 · JFK 22:12
    ♥ Do have faith in what you're doing.