问题标签 [parceljs]

我正在使用带有打字稿的包裹并且开箱即用，现在当我尝试包含 svg 时它不起作用，

这是因为我需要更改打字稿

这使我现在可以编译我的打字稿。

现在另一件不起作用的是现在我想导入我的 SVG 组件并像 create-react-app 2 一样使用它

从“./icon.svg”导入图标

所以这看起来很简单 https://www.npmjs.com/package/@svgr/parcel-plugin-svgr yarn install 我得到无法解决

所以我想也许是插件，我尝试使用

https://www.npmjs.com/package/parcel-plugin-inlinesvg

我得到同样的问题。

我错过了什么？

我看到有些人有 .babelrc 文件，但插件应该至少可以解决文档所说的问题。

在 Parcel 中使用插件再简单不过了。您需要做的就是安装并将它们保存在您的 package.json 中。插件应该以 parcel-plugin- 或 @your-scope/parcel-plugin- 为前缀，例如 parcel-plugin-foo 或 @your-scope/parcel-plugin-foo。package.json 中列出的带有这些前缀的任何依赖项都将在初始化期间自动加载。

似乎插件启动了，但没有任何效果。

如果没有插件，我会在我的公共路径中获取文件，并在我的 JavaScript 运行时中使用一个字符串。

我错过了什么，我做错了什么？

我正在使用 Parcel 来捆绑我的客户端代码，并且每次我运行生产构建时，它都会将 javascript 代码捆绑到一个带有散列部分的文件中。例如：webrtc.27c30b71.js。

目前，每次构建客户端代码时，我都必须进入服务器文件并手动更改代码以反映新生成的散列名称。

必须有更好的方法来解决这个问题。如何做到这一点，以便每次重建客户端代码时都不必手动修改服务器代码？

我有一个使用一些 CSS 和 TypeScript 的 HTML 网页。我一直在使用 ParcelJS 开发服务器来构建和测试我的页面。

现在我想通过 Web 服务器为我的应用程序提供服务。我有一台设置了 nginx 的 Ubuntu 18.10 DigitalOcean droplet/虚拟机。

我将代码克隆到我的服务器上，安装了 ParcelJS，并按照此处parcel build index.html的说明运行。

然后我尝试通过从/var/www/mysitedomain/html/app.htmlto创建一个符号链接来部署我的网页~/myappdir/dist/index.html。

这（有点）有效：当我访问我的网站时，我的浏览器会加载我的 index.html。

但是，我的 CSS 都没有渲染，而且我的脚本似乎也没有运行！

显然，我做错了什么。我应该做什么来部署我的应用程序？

这是我的精简 index.html （运行后parcel build index.html）：

这是我的/etc/nginx/sites-enabled/mysite.com：

我正在从 Webpack 迁移到 Parcel，并在我的组件中使用这样的文件夹别名：

我收到此错误：Cannot find module 'actions/authActions'

奇怪的是，它只在使用时显示build，它在开发模式下工作，而不是在生产模式下。

我已经在 package.json 中设置了我的别名，就像文档说的那样：

这是一个服务器端渲染的应用程序，我在不同的地方导入组件，我不能使用默认的 Parcel 根，因为它是相对于入口文件的。

我怎样才能让它正确解析别名？

我发现了如何使用 webpack 使 React 全球化：https ://stackoverflow.com/a/32556581/565877

但我想知道如何使它成为全球包裹

我正在制作一个天气应用程序。

为了开发这个，我将 Node.js 与 NPM 和 Parcel 一起使用。（我需要这样做，否则 OpenLayers 将无法工作，但我之前没有使用过它。）

我需要能够使用用户输入。例如，我希望用户单击一个按钮，然后需要发生一些事情。

下面是一个非常简单的解释，我需要完成什么。

我需要在 index.html 中的按钮

点击后需要执行的函数，我需要在index.js中

当然，在我的应用程序中，功能需要有所不同，但这不是我的问题。

当我在 Node.js 环境中编码时，它仅在我将 clickKnop 函数放在我的 HTML 的脚本部分中时才有效。

当我把函数放在我的 index.js 文件中时，它不再起作用了。我收到以下错误：Uncaught ReferenceError: clickKnop is not defined at HTMLInputElement.onclick

当我在我的服务器上使用创建的 /dist 文件时也会发生这种情况，一旦应用程序完成，它们将在该服务器上显示。

我怎样才能使这项工作？

希望大家帮忙！！

编辑：

现在有点乱，但我想要完成的是，不同的地理服务器 WMS 层会根据时间使用不同的参数调用。

为此，我想从我的 HTML 中输入（我还想制作一个按钮以 10 分钟的步长返回）。

所以我想制作调用改变时间变量的 WMS 层的函数。

同样，我现在拥有的代码真的很乱，但我仍在努力，所以请看过去..

希望这可以帮助...

当我尝试使用 Parceljs 捆绑器的 globbing 导入目录的所有内容时，它给了我一个错误。它给了我“找不到或无法读取要导入的文件”错误。我的印象是 Parcel 会为您处理这种设置的配置。我正在尝试像这样导入我的部分：

我需要为 Parceljs 配置什么来导入目录的内容吗？

我在我的应用程序中使用 Parceljs ( https://github.com/parcel-bundler/parcel ) 和 React。我决定使用 Prime React 组件，因为它们非常坚固且结构良好。我已经使用 npm 成功安装了 Prime React，当然所有的 js 和 css 文件都位于 node_modules/primereact 文件夹中。此外，所有 css 文件（包括所有免费主题的 css 文件）都在 node_modules/primereact/resources 文件夹中。

在 Prime React 文档中，他们只提到 Prime React 组件能够工作所需的 css 文件是什么，并且如果您使用 webpack，还有如何导入 css 文件的示例。

这是 Prime React 组件的“入门”文档部分的链接：

https://www.primefaces.org/primereact/#/setup

根据文档，如果我使用 webpack，我可以使用 import 命令导入 css 文件，如下所示：

但是，如果我使用 Parceljs Bundler，导入 css 文件的最佳方法是什么？

显然，我可以将 css 文件从 node_modules/primereact/resources 文件夹复制到我的应用程序文件夹，然后通过链接正常导入 css 文件：

但这样我就不能只用 npm 更新 prime react 并获取最新文件。

解决此问题的最佳方法是什么？

我正在尝试创建一个 Chrome 扩展程序。

但是，一旦我尝试集成 Parcel，我就有点不知所措了。我想使用 Parcel 与旧版 Chrome 兼容 + 将我的代码拆分为多个文件。

我的文件夹结构：

当我尝试使此命令起作用时：

我最终只在 '/dist' 文件夹中使用了 'script.js'，但我想创建一个可以打包和发布的 dist 文件夹。我基本上想在 dist 文件夹中获取我所有的 html、css、js（等）。这可以做到吗？

您将如何添加一个完整的框架，例如 Vue 或 React，例如制作弹出或选项页面？

我正在将旧的 React 项目转换为使用 Parcel 进行构建。

就目前而言，我几乎所有东西都在工作，但我很难处理静态资产。我有一个 index.html，它引用了许多样式表、js 库（例如 jquery、jquery-ui 等）。我知道最好将这些导入到我的 javascript 文件中，但目前这不是一个选项，因此它们需要保持全局性。

index.html 文件如下所示：

使用 parcel，我必须将所有这些文件包含在 src 文件夹中，否则在解析 index.html 文件时会引发错误（即“找不到 jquery”）。但是，当我在 src 目录中包含这些文件时，会产生一些问题：

1. jquery 文件、静态资产等都被重命名。当某些 jquery 库需要引用全局 jquery 文件时，这会产生问题，因为它具有不同的文件名（即 jquery.563534.js）
2. 我不希望将这些文件放在 src 目录中，而是将它们驻留在 src 之外的“静态”目录中。
3. 我不想花时间等待这些文件被解析，因为它是不必要的。

有什么想法可以在不从 HTML 文件本身中删除导入的情况下避免这种情况吗？