为什么仍然有很多人使用create-react-app?这非常重要,

x4shl7ld  于 2个月前  发布在  React
关注(0)|答案(5)|浏览(47)

免责声明:我不是要冒犯create-react-app的维护者,但工具在不断发展,毫无疑问,使用像nextjs或vite等较新工具的人也会提出这个问题。

tl;dr

在使用create-react-app时遇到了许多人遇到的问题,为什么还有那么多人在使用它?
它甚至没有热模块重载等功能,而且强制安装了许多测试包。
我认为现在cra对于许多新开发者来说不是一个可行的选择除非你觉得create-react-app更方便(实际上并不是)。

这里列出了3个替代cra的方案:

1. Vite(初学者到高级)

所以如果一群新开发者阅读了这个问题,我真的建议你切换到vite。不仅vite有热模块替换功能,而且简化了创建React应用的过程(启动项目中不包含测试库等)。
要开始使用它,根据你使用的包管理器运行以下命令之一:

# npm 6.x
npm create vite@latest my-react-app --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react

# yarn
yarn create vite my-react-app --template react

# pnpm
pnpm create vite my-react-app --template react

运行命令后按照说明操作,你就拥有了一个启用了hmr的React应用。 Official documentation
对于默认构建单页应用的人来说,这是一个很好的选择,因为一旦你的应用变得复杂,依赖项的重新打包就会变得更长,从而降低生产力。

2. Next.js(中级到高级)

除了热模块重载外,nextjs还支持一系列渲染模式,如服务器端渲染、增量静态生成、静态站点生成以及客户端渲染。
将所有内容都处理在服务器上而不是客户端给应用程序带来了搜索引擎优化的机会。
要开始,运行:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

你就拥有了一个可以被谷歌搜索索引的应用程序,并将被许多人看到。更多信息请查看 Next.js Official documentation

3. Remix(中级到高级)

有时候,项目需求比nextjs能提供的要多得多。对于这种情况,remix是解决方案。
尽管remix仅支持客户端渲染和服务器端渲染,但它具有嵌套布局。
因此,当通过链接重定向时,而不是渲染整个页面,remix只渲染UI的一部分。这对于 Jmeter 板风格的应用程序非常有用。
要开始一个remix项目,运行:
npx create-remix@latest
然后回答一系列问题来搭建你的应用。更多信息请查看 Remix documentation

iyfamqjs

iyfamqjs1#

随着Meta最近官方支持Rust,我认为使用Rust构建CRA v2.0会很好。这将用Deno取代Node.js( https://deno.land ),并用类似于esBuild的Rust版本替换Webpack( https://esbuild.github.io )。

vecaoik1

vecaoik12#

混搭是否允许创建CSR SPA?此外,Next.js主要面向SSR,而不是完整的CSR SPA。
如果我必须创建一个CSR SPA,CRA、Vite或自定义配置是主要选择。除非由高级开发人员完成,否则自定义配置需要花费大量时间。Vite似乎在某些React包中存在问题,例如CKEditor,因此在许多情况下,CRA似乎是可行的解决方案。然而,随着项目的增长,它确实变得非常慢。

yshpjwxd

yshpjwxd3#

我认为Nextjs也可以做SPA,但需要进行一些配置。

wtlkbnrh

wtlkbnrh4#

感谢您撰写此文!Here ,它还提到CRA似乎不再维护了,我不知道该使用什么替代。

vmjh9lq9

vmjh9lq95#

感谢您撰写这篇文章。
今天我使用pnpm搭建了一个turporepo的monorepo,当我尝试使用

pnpm create react-app my-app

创建一个cra应用时,遇到了以下错误:

npm ERR! Cannot read properties of null (reading 'matches')

尝试使用

pnpm create vite my-app

添加所有内容后,问题得到解决。

相关问题