问题标签 [preact]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
177 浏览

reactjs - 试图找到一个非常基本的 preact.js 设置,我可以在其中调试源代码

我的问题(我认为)相当简单。我正在尝试深入研究 preact.js 的内部结构,但不确定如何去做。我的意思是,我可以让框架正常工作;我通过 preact-boilerplate 设置中的 webpack 构建来做到这一点。再一次,工作正常,但似乎有太多的转译和源映射和热加载,不管其他什么让这些框架如此快速和花哨,我似乎无法真正拦截代码,所以我可以做无聊的调试诸如 console.log 之类的东西。

当然,我可以在 node_modules 文件夹中找到 preact 源代码;但是,此代码似乎不是实际运行/编译的代码。我怀疑这是因为由于 webpack 或 babel 或谁知道,所有内容都在实时转译。无论如何——我只想要一个可以使用 preact.js 但我可以实际访问代码的设置。想想一个在标签中带有 jquery 文件的普通网站。类似的事情......虽然我知道理论上我可以做一些事情,比如将 preact.js 添加到主 index.html 页面上的脚本标记中,但由于 babel 转译等原因会出现并发症。至于通过 webpack 配置选项来做这件事的某种方式,这超出了我的薪酬等级……但这样的配置选项也可以。在一个完美的世界里,

这是一个奇怪的问题,因为我实际上正在努力使事情变得简单。我觉得我在要求看电视,但是虽然这个地方很糟糕,有 90 英寸的纯平屏幕,但我只需要一个带有真空管的简单黑白。任何帮助,将不胜感激。非常感谢。

0 投票
2 回答
3488 浏览

javascript - 在汇总/气泡中定义浏览器全局

我正在制作一个 Preact SSR 应用程序,使用rollup进行捆绑和buble进行 ES2015 转换。目前,我捆绑到我的客户端构建中的外部模块之一@horizon/client使用 WebSockets。目前,由于捆绑使用的是Node,所以没有定义这个,导致构建错误:

请记住,我来自Webpackbabel环境。使用这些工具时,我将有一个插件来定义将出现在输出中的东西,而不是在 Node.js 中。我将如何使用汇总/气泡来做到这一点?

我当前的构建文件如下所示:

0 投票
1 回答
104 浏览

preact - 在 preact 应用程序中创建 .babelrc 需要什么

我从 Preact 应用程序开始。文件说_

最好不要在代码中声明 @jsx pragma,而是在 a 中全局配置它 .babelrc

对于 Babel 5 及之前版本:

对于通天塔 6:

我是 Preact 世界的新手,想了解为什么我们需要创建这个文件以及 jsx pragma 是什么?

0 投票
0 回答
565 浏览

javascript - 如何在汇总 + 气泡设置中使用 preact-compat 和服务器端渲染?

我有一个使用 rollup + buble 的 preact 应用程序。我需要使用另一个使用 React的组件文本掩码。我正在尝试在我的汇总构建文件中创建别名。对于客户端,它可以完美运行,但是在服务器端构建时,它会失败。我的汇总构建配置中的插件部分如下:-

我遇到了一个问题,它说在服务器端应用程序上使用 preact-compat 时存在问题,并且建议使用模块别名作为替代方案。所以我尝试在我的节点服务器文件中提供以下模块别名:-

即使这样做了,我仍然收到以下错误:-

0 投票
2 回答
301 浏览

javascript - Preact 和 FabricJS

我开始使用 preact 开发一个应用程序,我想知道是否可以在 preact 中使用 FabricJS。有人可以帮我理解我该怎么做吗?

0 投票
1 回答
327 浏览

reactjs - 在 Preact 中创建可插拔组件

我已经开始使用 preact 创建一个占用空间更小的 pwa。到目前为止一切顺利,该应用程序几乎作为模块化组件完成。

当我尝试将此组件插入另一个 React Web 应用程序时,天堂中的麻烦就出现了。preact 组件只是在 go 上呈现。而我想在我自己的视图层次结构中实例化这个组件。

就像是:

但是一旦我尝试包含bundle.js来自 Preact 的构建,它就会呈现为body擦除其他所有内容。

有什么我想念的吗?

这是Preact index.js

理想情况下,这应该给了我一个组件<Player/>,但它是自己渲染的。我什至没有使用Preact.render()

0 投票
1 回答
195 浏览

reactjs - preact compat 导致组件无限安装

我有使用 redux 和 react 路由器的 reactjs 应用程序。我想切换到preact。当我将 webpack 配置更新为别名 react 和 react dom 时。组件开始无限安装。它安装然后卸载..继续这样做。Webpack 配置。

反应.js

这个文件是因为我使用的是 react hot loader。React 应用程序运行良好.. 但添加 preact 有错误。请指导我。

0 投票
1 回答
223 浏览

javascript - 无法访问数组中的单个对象?

在此处输入图像描述嗨,我在访问数组中的对象时遇到问题...我不知道是因为我更新了 Chrome 还是因为我添加了,然后从我的 React 应用程序中删除了 Preact。问题是这样的:

标签是对象数组:

结果我在控制台中得到了这个:

当我展开它时,我得到了这个:(图片)

所以没有办法访问它,除了

在所有其他方面我都不确定......为什么会这样?!我可以发誓直到昨天我都可以使用 fullTag.tag 访问它...有人可以解释一下吗?

0 投票
1 回答
1167 浏览

typescript - 将 Jest 与 Typescript + preact 一起使用

将 JSX 编译到h()测试中的问题。所有配置文件都类似于 create-react-app,排除对TypeScript和的更改preact

我通过create-react-app my-app --script=react-scripts-ts- 为 TypeScript 项目创建应用程序。然后弹出并更改reactpreact(不要使用preact-compat)。

为了迁移到preact我添加package.jsonbabel.plugins section新插件["babel-plugin-transform-react-jsx", { pragma: "h"}]中 - 用于转换<JSX />h(JSX)函数调用,而不是默认React.createElement(JSX)(迁移指南https://preactjs.com/guide/switching-to-preact)。

这很好用。

但是 test 有不同的转译配置<JSX />:它React.createElement(JSX)是默认转译。在测试中我犯了一个错误ReferenceError: React is not defined at Object.<anonymous> (src/Linkify/Linkify.test.tsx:39:21)。如果我手动更改<JSX />h(SomeComponent)在测试和测试文件中 - 它可以工作。

如何转译<JSX />h(JSX)测试?

测试样品:

0 投票
1 回答
46 浏览

javascript - 在 Preact 应用程序中更新 Pinterest 嵌入

我有一个组件需要根据应用程序的状态加载更改的 Pinterest 嵌入。Pinterest 嵌入由一个标签组成,该标签通过使用我的 HTML 底部的异步脚本(可在此处<a>获得)转换为标签内的复杂布局。但是,我无法弄清楚如何在使用更新的道具重新渲染时清除旧嵌入并重新运行脚本以渲染新嵌入。谢谢!<span><span>

我的组件: