create-react-app不得不说的事儿以及如何升级react18

发布网友 发布时间：2024-09-30 14:33

我来回答

共1个回答

热心网友 时间：2024-11-29 12:44

笔者作为react的忠实拥护者，用create-react-app(简称cra)+customize-cra搭建项目，并且1年多以来一直使用这种开发模版，但就在上周，在升级了react-scripts&react18的过程中，发现cra项目升级react18带来了20+error，导致项目跑不起来。即使我千辛万苦将异常都解决了，又发现我的一些移动端项目的px2rem功能nowork了。我开始很恼火，并且开始思考最原始的问题：作为react开发者，我需要的是怎样一个react开发环境？

什么是cra？

对于开发一个react项目来说，怎么快速搭建一个友好的，可靠的并且自带性能优化的环境，是非常繁琐的，不仅需要关注babel，还要学习各种各样的webpack配置，以及如何性能优化，这会花费大量的时间，可能忙活了半天，兴许会被各种各样的异常劝退。

对于这个问题，虽然业界巨头*给出了答案：create-react-app(简称CRA)，但是cra的开发环境非常简陋，虽然提供了诸多配置，但是还不够易用，如果用CRA来简单做一个demo，他非常胜任。但是如果用于生产，其实我们还需要加入很多东西，改很多webpack配置，比如初始化的cra项目不支持less，我们需要自己添加less-loader

当我们想对cra做一些扩展的时候，又不能直接eject的时候，customize-cra是当前的最优解，但是也会引入config-overrides这样的配置文件，这弃不是背离了零配置的初心，customize-cra还是会将我们带回那个我们不熟悉的webpack。

于是乎，我开始思考，当我站在一个react初级开发者的角度上，我想让我的项目能跑在生产上，并且无需担心webpack配置，并且这个项目从出生开始就自带了最好的性能优化/分包/cdn，并且是他随时支持新技术，拥抱最新的react版本。

基于以上原因，我开始探索自己的scripts来替换掉cra-自带的scripts

我会跟你说我是怎么做的：

首先，我拉取了最新的cra项目，然后把他eject，这时候我能拿到最原始的cra项目的webpack配置

然后我新建造了一个github+npm项目：lemon-scripts，基于eject出来的代码，做一些自定义开发。

如果你才刚开始考虑建项目，lemon推荐你使用lemon-react-app，这是一个已经集成使用了lemon-scripts的reactapp，项目配置面向生产更加工程化，并且支持移动端适配，做h5项目直接上手，并且已经支持了react18。

如果你手上已经有了一个现成的react项目，你可以这样使用lemon-scripts

但是react项目的复杂度千变万化，每个人搭配的不一样，lemon-scripts不保证一定dowork，而且，lemon-scripts是lemon在日常开发工作中的一些总结，也许会夹带一些私货，如果你要去除这些你不需要的东西或者如果你正在使用lemon-scripts，并且遇到了问题，可以先看看以下的说明文档，如果并不能解决你的问题，欢迎提issue。

如果你正在使用cra，可以直接安装lemon-scripts，我能告诉你它正在支持什么是cra没有的。lemon-scripts基于cra内置的react-scripts做了一些功能性扩展

lemon-scripts致力于将react-scripts完全推向生产，并且真正做到让react开发者开箱即用，并且提供尽可能极致的打包性能优化。

当然，在lemon-scripts，cra项目所有的配置和能力一如既往的支持并持续保持更新，并提供以下扩展。

[x]原生支持less

[x]原生支持svg2种引入方式fileurl/Component(相比cra需要调整才能支持)

[x]原生支持多个react生态包的cdn打包，天然的纯净到bundle只有你的业务代码。

[x]原生支持移动端h5适配

[x]原生支持webpackanalyze，随时掌握项目五脏六腑

[x]原生支持aliasresolve，跟tspaths无缝结合

[x]同时支持多页和单页

[]....

[]...

[]..

cra项目，实在过于pure，初级开发者想快速开始做项目恐怕有点难度，所以基于lemon-scripts，我改造了整个工程，让他更加面向生产。

通过替换了scss正则，以及引入了less-loader，注意原cra不支持less

在lemon-scripts提前做好了一些工具库的分离，将一些稳定的库不需要被经常打包的依赖存放在cdn，比如react。通过这样，我们在开发之前就力争提供一个完全pure的环境，让你的bundle尽量只包含你的业务代码。可以看到，我们将一系列工具库，都提取到了cdn，节省了构建时间和打包效率。

注意，因为lemon-scripts自带支持将以下依赖抽离成cdn。react|react-dom|react-router-dom|react-router|mobx|axios|mobx-react-lite。

如果你不需要这些cdn，可以在package.json中加配置来替换：

lemon-scripts默认使用了七牛云作为cdn服务，如果你想使用自己的cdn，可以在package.json中加配置来替换：

如果你想做移动端的项目，可以在package.json中设置设计尺寸375/750/xxx等等，内置的px2rem-loader将会自动工作。

lemonscripts内置了webpackanalyzeplugin，如何开启分析，只需要命令行加入--analyze

项目中想要alias，因为lemon的项目是ts项目，所以lemon-scripts设计之初，会自动从tsconfig.paths.json去读。也就是tspath能读到的mole，用了lemon-scripts都可以通过alias找到，这让那些正在使用ts&custom-cra的同学会感到很舒服。

在package.json设置multiPage，则lemon-scripts将开启多页面模式，会从根目录下的src/pages中找到所有的pages模块进行打包开发。

关于lemon-scripts以及lemon-react-app，可以点击以下地址看详细文档

lemon-scripts

lemon-react-app

lemon-scripts以及lemon-react-app，完全基于react-scripts&cra，并且致力于让react初级开发者在他们熟悉之前有个能完全用于生产的项目，并且完全不需要去熟悉webpack这个大家伙。

由于lemon-scripts是基于cra项目来扩展的，如果lemon-scripts并不能解决你的问题，可以看看create-react-app，cra支持的lemon都会支持。