首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用preact别名时,create- react -app在测试中找不到react

使用preact别名时,create-react-app在测试中找不到react的原因是create-react-app默认使用的是React作为前端开发框架,而preact是React的一个轻量级替代品,两者虽然有相似的API和功能,但是在代码实现上有一些差异。

当使用preact别名时,create-react-app在测试中找不到react的解决方法如下:

  1. 确保已经安装了preact和preact-alias插件:npm install preact preact-alias --save
  2. 在项目的根目录下创建一个.env文件,并添加以下内容:NODE_PATH=src/
  3. 在项目的根目录下创建一个jsconfig.json文件,并添加以下内容:{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] }
  4. 修改src目录下的index.js文件,将其中的import React from 'react'替换为import React from 'preact'
  5. 运行测试命令时,使用react-scripts替代react-scripts:react-scripts test

通过以上步骤,create-react-app将会使用preact作为React的替代品进行测试,解决了找不到react的问题。

preact是一个轻量级的React替代品,具有更小的体积和更快的加载速度,适用于对性能要求较高的项目。它与React具有相似的API和功能,可以无缝替换使用。腾讯云提供了云原生应用开发平台Tencent Cloud Native,其中包括了云原生应用开发框架Tencent Cloud Native Framework,可以用于快速构建和部署云原生应用。相关产品和介绍链接如下:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript 新一代构建工具对比

重新构建这个应用程序,让我可以测试开发人员将一些相当标准的 React 依赖项添加到工具(包括 React Router 和 axios)的体验。...你使用 Preact 不会有同样的问题,因为它不需要任何环境变量,而且默认情况下已经为浏览器准备好了。...同样使用 Vite ,我引入使用 node API 或传统格式的依赖项没有任何问题。它们似乎都被塞进了一个浏览器可接受的 esmodule 。...首先,在你的package.json把htm/preact别名为htm/react,把react别名为es-react。...wmr 转换 JSX 使用了一个叫 htm 的工具,它提供了一些很棒的好处。比方说,我们 wmr 中使用 Preact 写一个计数器,却犯了一个错误。

1.8K10

ReactPreact PWA 性能分析报告

的例子使用服务端渲染,首屏渲染时间减少到1.1s,首屏完整渲染时间减少到2.4s - 这提高了用户页面加载速度的感知,他们可以更提前获取内容,而且测试显示SEO也略微改善。...缓存Javascript,Service Worker使用了缓存API(如我们JavaScript 性能入门一文中提到的),使得TreeboV8的代码缓存也有不俗的优先选择,这样Treebo反复访问的启动节省了一点间...理想情况下,您应该使用preactpreact-compat来进行开发,生产和测试。 这可以让你在早期发现任何交互操作性错误。...如果你只想在Webpack使用别名preactpreact-compat生成构建(例如,如果你最开始使用Enzyme),请确保部署到服务器之前彻底测试一切正常工作。...', }, }, 这种方法的缺点是,需要兼容其他配套方案,这样Preact才能在他们想使用React生态的各部分同样工作 如果你正在使用ReactPreact对于95%的案例来说都是最合适的选择

2.2K20

干货 | Qreact,去哪儿网的迷你react方案

去哪儿深耕React多年,构建了两个基于React的UI库,它们都是用于移动端。如果这些库都是内置APP,应该没有要求。但是去哪儿分成十来个事业部,根据事业部的赚钱能力分配更新包的体积。...为了能让用户wifi上更新我们的APP,更新包的体积一般不超过100MB,因此像这样公用的框架与库体积越少越好。...4、扩展方便 尤其第4点,开发qreact,我们都为双方提了不少ISSUE。其实程序员还是比较腼腆,不愿麻烦人,因此我们写框架还是多留一些扩展接口吧。...整个qreact的架构大概就是: qreact= preact改+preact-compat改+react-web事件系统迷你版 preact的源码里一个叫options.js的文件,里面有一个options...图6 这了让preact支持它们,我们是框架diff节点,重新添加上它们的。因为这时,我们能轻松知道一个节点在DOM树的上下关系。 最后是对事件系统进行瘦身。

98580

Why you shouldn`t use Preact, Fast-React, etc. to replace React today

而且,FacebookReact 16还没有release的情况下已经主站开始使用React Fiber,并通过完整的测试用例保证其向后兼容性,让React使用者很安心。...react-static是指调用 renderToStaticMarkup 的数据。...Client Client是使用Chrome Headless模式来测试的。 Fast-React的浏览器端直接使用React@16来渲染。...而且得益于checksum的加持,如果checksum是一致的(react栏),React的渲染时间DOM节点较少的时候与Preact一致,节点很多的情况下比Preact、其他方案的成绩要好一大截。...小结 很兴奋React@16性能方面做了这么多优化,相信绝大多数情况下我已经不用考虑其他的替代方案了。当然也有例外: 当你的目标用户网络环境比较糟糕:之前的测试主要是基于执行速度来考察的。

46610

被升级整疯了,Etsy 放弃 React

Preact 还是 React ? Etsy 目前拥有两大主要产品栈。面向买家的页面,Etsy 使用的是基于 PHP 服务器的渲染方案,再配合客户端上的 jQuery/ 原始 JS。...面向卖家的页面,Etsy 选择使用React 渲染的 SPA 再配合一点点基于服务器的 HTML 渲染,借此尽可能减少从同一 PHP 服务器端堆栈接收的数据总量。...相关博客文章,Sangster 详细解释了 Etsy 迁移到 Preact 而不是最新版 React 的三个原因。 首先,采用 Preact 能最大程度地降低迁移风险。...同时 ReactPreact 中支持 / 测试 Web Toolkit 等工具必定会增加 FES 团队及其他同事的工作负担,导致团队很难实现全面的工具与架构共享。... Preact 成为整个 Etsy 的唯一标准后,这类问题也就随之消失了。

45641

Preact -- React的轻量解决方案

若团队选择此框架作为React的轻量解决方案的话,我们最好能具备维护和开发此框架的能力,这能够遇到bug的时候第一间修复,而且能够很好地开发一些组件,提升框架的开发效率。...如何上手及如何和React同一构建下使用 作者Getting Started里有比较好的介绍。其实不外乎就2点差异: 引入preact与引入react的差异。...将 jsx 编译成 js 代码,提供了一个选项 pragma 来选择 react(默认)还是其他的 Virtual-DOM。...因此如果混合使用 reactpreact,可以使用 preact 的 jsx 文件里添加 /** @jsx h /(或者 /* @jsx preact.h */,如果你只 import preact...Preact,大体是通过这个流程,然后最终转换成真实dom: render (类似于react-dom里的render,主入口,触发渲染) => diff => idiff (看起来应该是做dom

2K50

打爆 React 泡沫,重新审视前端技术选择

例如,我忽略了 Ember 和 Angular,因为它们的岁数比 React 还大。而且基准测试,它们的性能一般也不会显著优于 React。...但 Vue 使用的是更接近默认 HTML,而非 JSX 的模板语言,这使得模板文件编写条件与循环变得更轻松,不必借助 map 和三元组等变通方法。...SOLID 能够替代: React 和 ReactDOM。SolidStart 未来也有可能取代 Next,但截至本文撰稿,它仍处于 beta 测试阶段。...PREACT 适用于: 还想坚持使用 React,但希望运行速度更快的前端开发者。 PREACT 能够替代: React。...我不知道下一次飞跃会是什么、因为什么,但我发现大家感受到的很多问题在 React 其实找不到答案。这种感觉跟当初使用 jQuery 的时候很相似。

26010

打爆React泡沫,重新审视前端技术选择

例如,我忽略了 Ember 和 Angular,因为它们的岁数比 React 还大。而且基准测试,它们的性能一般也不会显著优于 React。...但 Vue 使用的是更接近默认 HTML,而非 JSX 的模板语言,这使得模板文件编写条件与循环变得更轻松,不必借助 map 和三元组等变通方法。...SOLID 能够替代: React 和 ReactDOM。SolidStart 未来也有可能取代 Next,但截至本文撰稿,它仍处于 beta 测试阶段。...PREACT 适用于: 还想坚持使用 React,但希望运行速度更快的前端开发者。 PREACT 能够替代: React。...我不知道下一次飞跃会是什么、因为什么,但我发现大家感受到的很多问题在 React 其实找不到答案。这种感觉跟当初使用 jQuery 的时候很相似。

33530

使用Preact 开发基于Shadow DOM的JS插件

相比于使用ReactPreact更符合我们的要。PreactReact的轻量级替代方案,体积仅有3kB,并且拥有与React相同的API(官网如是说)。...关于它的更多优点以及与React的差异性,都可以官网了解到,在此不再赘述。 开发过程 Preact提供了脚手架工具,并且也能与其他构建工具如Webpack、Rollup等整合。...React或者Vue项目中,通常的做法是选择一个根节点,然后将根组件挂载至根节点上。...Shadow DOM可以直接添加style标签节点,并且只会Shadow DOM中生效,外部样式也不会在内部生效,完美做到样式隔离。...常见问题 组件选择 Preact可以直接使用React生态的绝大多数组件,然而其中有许多使用的是Styled-Components,对于这类组件是无法直接在Shadow DOM中使用的,因为Styled-Components

1.9K30

新一代构建工具的比较

通过这种方式,我们可以看到有哪些选择以及它们是如何叠加起来的,这样我们就可以需要的时候做出最好的选择。 当然,所有这些都会被我使用 ReactPreact 的经验所影响。...重新构建这个应用程序使我能够测试开发人员将一些非常标准的 React dependencies 引入到工具的经验,包括 React Router 和 axios。...也就是说,React 需要手动导入,然后将 JSX 转换为 React.createElement。但是,有一些方法可以 JSX 添加自动导入,或者为 Preact 配置 JSX。...但这对我的测试需求来说已经足够了。 尽管我们每次保存文件都会重新绑定整个应用程序,但是 esbuild 变慢之前,我们需要有一个非常庞大的应用程序。...这是因为它需要知道构建使用 React 和 ReactDOM 的哪个版本。你可以通过写一个 snowpack.deps.json 来解决这个问题,它可以通过运行以下命令自动创建: .

2.3K20

Why you shouldn`t use Preact, Fast-React, etc. to replace React today

而且,FacebookReact 16还没有release的情况下已经主站开始使用React Fiber,并通过完整的测试用例保证其向后兼容性,让React使用者很安心。...react-static是指调用 renderToStaticMarkup 的数据。...Client Client是使用Chrome Headless模式来测试的。 Fast-React的浏览器端直接使用React@16来渲染。...而且得益于checksum的加持,如果checksum是一致的(react栏),React的渲染时间DOM节点较少的时候与Preact一致,节点很多的情况下比Preact、其他方案的成绩要好一大截。...小结 很兴奋React@16性能方面做了这么多优化,相信绝大多数情况下我已经不用考虑其他的替代方案了。当然也有例外: 当你的目标用户网络环境比较糟糕:之前的测试主要是基于执行速度来考察的。

69180

为什么不用Preact或者Fast-React来代替React

而且,FacebookReact 16还没有release的情况下已经主站开始使用React Fiber,并通过完整的测试用例保证其向后兼容性,让React使用者很安心。...react-static是指调用 renderToStaticMarkup 的数据。...Client Client是使用Chrome Headless模式来测试的。 Fast-React的浏览器端直接使用React@16来渲染。...而且得益于checksum的加持,如果checksum是一致的(react栏),React的渲染时间DOM节点较少的时候与Preact一致,节点很多的情况下比Preact、其他方案的成绩要好一大截。...4小结 很兴奋React@16性能方面做了这么多优化,相信绝大多数情况下我已经不用考虑其他的替代方案了。当然也有例外: 当你的目标用户网络环境比较糟糕:之前的测试主要是基于执行速度来考察的。

34430

vite3使用指南,小白再也不用担心项目配置问题了

以获取每个模板的更多细节:vanilla,vanilla-ts, vue, vue-ts,reactreact-ts,react-swc,react-swc-ts,preactpreact-ts,...区分开发环境,测试环境和生产环境 首先在项目根目录下创建.env文件,Vite 使用 dotenv 从你的 环境目录 的下列文件加载额外的环境变量 .env # 所有情况下都会加载...测试模式下 通过验证我们可以看出,不管是什么模式下,都可以加载到.env文件的变量 更改.env的默认地址 我们现在的.env文件都是建立根目录的,如果.env.XX的文件太多,会显得我们的项目目录很乱...port: 9000,//项目启动端口 open: true,//项目启动是否打开浏览器 base:'/',//用于代理 Vite 作为子文件夹使用。...,会长打包时间,所以可以build再添加一个配置项关闭打包计算。

76830

Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间

运行时改造 Taro 小程序环境模拟实现了类浏览器环境,因此理论上任意的前端框架都可以 Taro 中使用。...兼容 React 生态 Preact 使用preact/compat 去磨平与 React 的 API 差异,让 React 的各种生态库可以直接运行在 Preact 上。...得益于此,开发我们可以使用任意的 React 生态库,甚至对 React、ReactDOM 的 API 引用也不需要修改,只需要简单地配置 alias 即可: // Webpack config const...React ,还是会包含 Vue2、Vue3 的适配层代码。...【Breaking Changes】安装对应的框架适配插件 因为 Taro v3.4 把各前端框架的适配逻辑拆分到对应的插件,因此旧项目升级需要安装对应框架的适配插件: 使用 React,请安装 @

84300

基于Vite+React构建在线Excel

react-ts preact preact-ts lit lit-ts svelte svelte-ts 我们可以看到,目前已经支持了react以及react-ts模板。...对于一个经常性使用React开发项目的程序媛来说,之前一直使用create-react-app来构建react应用,也没有觉得有太大的问题。...最开始要使用到Vite,本葡萄的内心还是有点疑虑的,因为毕竟Vite是跟着Vue3发布的,对于使用者而言,潜意识会觉得它和Vue更加适配;但在实际上手用了之后,才会发现Vite的搭建速度,不亏于它的名字...项目默认启动3000端口。打开后展示如上图所示,到这一步我们使用Vite就已经创建好React项目了,接下来我们需要引入纯前端表格控件,用来构建一个在线Excel。...要想使用,就必须先引入组件相关资源,我们可以package.json添加以下内容: "dependencies": { "react": "^18.0.0", "react-dom"

77030

Rocket Chat,一个纯前端技术构建的开源产品

跨平台解决方案上,React Native是先行者,它也是前端技术,React Native与React同出一门,都是Facebook的杰作。...当然,对于前端团队来说,使用React Native也能编写出非常好的移动app,肯定比不熟悉的Flutter来得更容易。 3.Electron 我前几周才专门就这个技术写了几篇文章。...链接在文末. 4.Preact 如果说起React,可能大家会非常熟悉。但Preact可能知名度就没有这么高了。Preact是什么呢? Preact是一款轻量级的取代React的前端类库。...它几乎完全兼容React,但更小,更快。(兼容是指它的写法与React几乎一样) 由于它的小和快,这使得一些习惯React,又觉得它太重了的,纷纷转向Preact。...Chat这样,使用前端技术构建一整套产品成本及收益的考量上非常可取。

3.8K40

【框架】984- 2021 年最佳 JavaScript 框架

React.js 我们编制的 2021 年最佳 JavaScript 框架的榜单,前端类排名第一是 React.js。...它的原型名为“FaxJS”, Facebook 消息来源(News Feed)上进行了首次测试。...Preact.js 我们的 2021 年最佳 JavaScript 框架榜单Preact.js 在前端类排名第五。它是 React 的轻量级、快速且功能强大的替代方案(它并非一个完整的框架)。...Preact.js 的基本原则与 React 相同,是一种使用虚拟 DOM 的基于组件的方法,同时与 React 完全兼容。 你还可以使用 React 包,而不会影响速度、性能和精简。...如果你不需要 React 的全部潜力,大多数开发者将在开发过程中使用 Preact,甚至在生产中切换到 Preact使用 Preact 的大公司有很多,包括腾讯、Uber 和 Lyft。

73030
领券