问题标签 [preact-cli]

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 回答
231 浏览

javascript - preact-cli 具有高严重性漏洞,并且 npm 审计修复程序循环运行(3.0.5 <-> 2.2.1)

我正在使用 preact-cli 建立一个 preact 项目:

这告诉我:

仅运行默认设置后的 3 个高安全漏洞!?
这听起来不是很让人放心。

好的,显然 npm fix 想要降级 preact-cli。那我们走吧:

是的,降级到 2.2.1 会引入新的漏洞。它们可以通过撤消降级并返回到 3.0.5 来解决。

这是一个循环,npm audit fix --force 只是在 preact-cli 的 3.0.5 和 2.2.1 版本之间来回切换。

一些上下文: 这似乎是一个已知问题

0 投票
1 回答
333 浏览

npm - 为什么 preact 安装后也没有在终端中被识别?

我已经安装了 Preact,但它没有在终端中得到识别。首先,我去了PreactJS的官方网站。医生说我必须跑步npm install -g preact-cli。当我使用 Yarn 时,我跑了yarn global add preact-cli. 它已成功安装,但有很多警告。然后我跑了preact create default first-preact-app。但它显示“术语'Preact'未被识别为cmdlet、函数、脚本文件或可执行程序的名称”的错误。

我试过强制清理缓存并重新安装preact-cli。但它不起作用。其中两个警告是,preact并且preact-render-to-string具有未满足的对等依赖性。所以,我也安装了它们。但它仍然不起作用。

我尝试过运行 npm 并尝试了这些命令。但它没有用。那么,我该如何解决这个问题呢?

我已经在 Windows 10 上使用 Powershell 和 Git bash 运行了这些命令。我正在尝试使用 Yarn 1.22.5 安装 Preact 10.5.12。需要注意的一点是,我尝试运行yarn dlx但它返回“找不到命令”的错误。当 preact 和 preact-render-to-string 安装完成后,yarn 会给出警告,提示它们没有二进制文件。

编辑:也许,这是 Windows 的问题。重新安装后问题消失了。

0 投票
3 回答
11734 浏览

npm - 是否有任何纱线相当于 npx preact create?

我正在尝试preact create使用 Yarn 运行命令。运行preact create ..... .....npx preact create ... ..... 它工作正常,两个命令都使用 npm。但我正在尝试使用 Yarn 运行命令。我尝试了以下命令,但没有任何效果。错误说“在路径中找不到 package.json 文件”。

yarn preact create .... ....

yarn dlx preact create .... ....

yarn preact-cli create .... ....

yarn dlx preact-cli create .... ....

那么,我应该怎么做才能使用 Yarn 运行命令。一种替代方法可能是使用 npm 运行命令,然后运行 ​​yarn install,然后运行 ​​npm uninstall。但实际的方法是什么?

0 投票
0 回答
14 浏览

node.js - 成功构建后出错

我正在构建一种音乐控制器应用程序,其中我有 8 条路线,每条路线播放不同的播放列表和一个控制面板(管理员),用于控制每条路线的音量和播放状态。一切都在开发中运行良好,但在部署到 heroku 后,我在 url 上收到“应用程序错误”。当检查 heroku logs --tail 我发现这个错误:

'找不到模块'./api/room/room.routes'。

我不知道哪里出了问题,在过去的几个小时里试图弄清楚这一点。我使用反应作为前端和节点作为后端。

我的 server.js 文件 -

0 投票
0 回答
89 浏览

jspdf - 如何使用 preact-cli + jspdf 进行构建

我正在尝试将带有jspdf的 pdf 文件保存在preact -cli样板文件中。我正常开始我的项目:

npx preact-cli create <template-name> <app-name>

之后npm install --save jspdf,我使用此代码保存文件(捆绑到一个按钮):

当我在开发服务器(npm run dev)上运行它时,它工作正常。但我无法将其构建到生产环境中(npm run build

这是我的错误:

错误模板执行失败:类型错误:无法读取未定义的属性“绑定”×错误类型错误:无法读取未定义的属性“绑定”

  • ssr-bundle.js:5474 Object.6PsS XXXXXXXXXXXXXXXXXXXXXXXX/build/ssr-build/ssr-bundle.js:5474:39

  • ssr-bundle.js:27 webpack_require XXXXXXXXXXXXXXXXXXXXXXXX/ANPP/build/ssr-build/ssr-bundle.js:27:30

  • ssr-bundle.js:2661 Object./jyc XXXXXXXXXXXXXXXXXXXXXXXX/ANPP/build/ssr-build/ssr-bundle.js:2661:16

  • ssr-bundle.js:27 webpack_require XXXXXXXXXXXXXXXXXXXXXXXX/ANPP/build/ssr-build/ssr-bundle.js:27:30

  • ssr-bundle.js:92 XXXXXXXXXXXXXXXXXXXXXXXX/build/ssr-build/ssr-bundle.js:92:18

  • ssr-bundle.js:95 对象。XXXXXXXXXXXXXXXXXXXXXXXX/build/ssr-build/ssr-bundle.js:95:10

  • loader.js:1200 Module._compile internal/modules/cjs/loader.js:1200:30

  • loader.js:1220 Object.Module._extensions..js 内部/modules/cjs/loader.js:1220:10

  • loader.js:1049 Module.load 内部/modules/cjs/loader.js:1049:32

  • loader.js:937 Function.Module._load internal/modules/cjs/loader.js:937:14

  • loader.js:1089 Module.require 内部/模块/cjs/loader.js:1089:19

  • helpers.js:73 需要内部/模块/cjs/helpers.js:73:18

  • prerender.js:32 预渲染 [XXXX]/[preact-cli]/lib/lib/webpack/prerender.js:32:11

  • render-html-plugin.js:37 Object.ssr [XXXX]/[preact-cli]/lib/lib/webpack/render-html-plugin.js:37:55

  • template.html:110 t41+.module.exports [XXXX]/[preact-cli]/lib/resources/template.html:110:37

  • index.js:264 [XXXX]/[html-webpack-plugin]/index.js:264:16

查看 JSPDF,他们建议使用自定义 webpack 配置:

Preact-CLI 使用自定义的 webpack 配置。您应该创建一个名为 preact.config.js 的文件来对 webpack 进行更改,但我现在知道如何在 preact 文件上实现它,而且我不知道它是否会起作用。

有好心人帮帮我吗?

0 投票
0 回答
109 浏览

firebase - 使用 preact-cli 的 Cloud Firestore 构建错误

我正在尝试从 preact-cli 生成的项目中使用 Firebase 的 Cloud Firestore,但遇到了第一个障碍。我选择了 Firebase 的 v9 SDK,它处于测试阶段,以领先一步(但也许这是一个错误)。构建时,Firebase SDK 文件出现错误,但我不确定它是由 SDK 本身、babel、webpack、preact-cli 还是组合引起的。我也不知道如何诊断它,因为我是这些工具的新手。

下面的步骤,任何想法这个错误的原因可能是什么?

然后在中src/components/app.tsx,通过添加使用 Firestore SDK

但是构建失败。

0 投票
1 回答
494 浏览

reactjs - 安装 Webpack 5 时 preact build 不起作用

我正在开发一个也使用 Webpack 的生产 Preact 应用程序。在该项目中,尝试preact build <args>从 npm 构建脚本运行失败。

之后,我使用 . 创建了一个最小的 Preact 应用程序npx preact-cli create default preact-test,安装了 Webpack 5,现在preact build抛出以下错误,这与我试图重现的错误相同:

我看到一篇文章说 Webpack 5 已经弃用了这个内部插件,但这是我在任何地方找到的最有用的信息。如果有人有解决此问题的方法,我将不胜感激。

0 投票
0 回答
33 浏览

typescript - 如何使用 typescript 在 preact 中添加 sass

我阅读了有关如何添加 sass 但不起作用的官方文档。

  1. 首先,我运行以下脚本:
  1. 二、我在我的项目中添加sass
  1. 我开始了我的项目,但发现我无法加载任何scss文件

在此处输入图像描述

我之前在使用 typescript 并使用 webpack 做出反应时遇到过这个问题。我通过更改 webpack 配置解决了这个问题,如下所示:

但是我尝试了所有可能的方法来更改文件中的 webpack 配置preact.config.js,它不起作用......

由于我是 webpack 的新手,我不知道如何重写

选项而不更改其他配置。如果有人可以提供任何帮助,我将不胜感激。

0 投票
0 回答
34 浏览

i18next - 如何配置 i18n.config.js 以便 `preact build --prerenderUrls ./prerender-urls.js` 成功?

我有一个前端项目设置preact-cli,它利用i18next-backend http。此配置是为了便于从 CDN 按需提供翻译服务,该应用程序将在生产环境中运行。到目前为止,我可以通过以下方式使其工作:

  • npx preact build --no-prerender

随后部署到AWS Cloudfront

现在我想静态prerender一些主要的路线,但很遗憾,一个幼稚的:preact build --prerenderUrls ./prerender-urls.js行不通。这样做的原因是,一旦要执行这些路由的步骤,它就会在没有运行 http 服务器的情况下prerender尝试利用。i18next-http-backend在这一点上,preact build继续挂起(好像我在做一个preact build --analyze)。

因此,对于该步骤,我需要i18next-fs-backend改用。遗憾的是,虽然这适用于在 CI/CD 服务器上为这些prerendered路由捆绑翻译,但它不适用于需要通过http-backend.

对于这个问题,我只看到两种类型的解决方案:

  1. 分两步进行构建。首先 with --no-prerenderani18n.config.js利用.http-backend然后--prerenderwith ani18n.config.js利用fs-backend. 这里的问题是两个构建之间的哈希值不同,所以我不能简单地用另一个构建复制预渲染的路由。
  2. 在构建期间设置一个可以提供这些翻译的 http 服务器。这本身是可能的,但这是一个相当脆弱的解决方法。

有一个链式后端的概念,i18next它允许我定义一个回退,但在浏览器的上下文中,i18next-fs-backend作为主要来源有什么意义?

在这个阶段对我有很大帮助的是,如果有人能指出

  1. 要么我没有考虑第三种可行的选择
  2. 要么我误解了一些做链式后端的方式
  3. 要么确认我是正确的,要么可以提出一个强有力的案例,preact-cli需要允许我们分两部分进行构建。
0 投票
2 回答
74 浏览

react-router - 如何从 preact-cli 添加 react-router 到 preact 应用程序

我使用 preact-cli 创建了一个 Preact 应用程序,需要添加react-router-dom到我的项目中进行路由。为了安装路由器库,如何在不弹出应用程序的情况下将 react-router 添加到项目中?

我已经看到了添加 webpack 的选项,但这需要弹出应用程序。

我在项目中添加"preact-compat": "^3.19.0",到我的 package.json 中,但不确定如何添加 webpack 或导入必要的 react-router 导入:

import {BrowserRouter as Router, Route, Switch, NavLink} from 'react-router-dom';