ParcelJs：捆绑一个包含锚标记但不是入口点的 html 文件

Question

我有一个简单的 Web 应用程序（无框架），我将其与 Parcel 捆绑在一起。它有一个 pages 文件夹和一个 components 文件夹。组件只是我想在整个应用程序中重用的 html 的一部分。页面是包的入口点 (parcel build pages/index.html pages/*/*.html)。组件由 html 文件和 javascript 文件组成。我将 html 导入 javascript 和 bundle-text:，创建一个 DOM 元素使用字符串结果，然后将其附加到文档中。然后 javascript 文件被导入到 pages 目录中的文件中。问题是，如果我在组件内使用锚标记，其中 href 指向 /pages 中的文件，则捆绑包已损坏。它无法正确解析路径。如果我使用相对于组件导入位置的路径，例如。 <a href="/someFolderInPages/index.html> 包裹找不到正确的文件：@parcel/core: Failed to resolve '/someFolderInPages/index.html' from './components/comp-1/index.html'。如果我使用从 /components 到 /pages 的路径，例如。 <a href="../pages/someFolderInPages/index.html> 它说：Error: Bundles must have unique names。有没有办法解决这个问题，或者我应该完全删除组件中的 html 文件？

Answer 1

当您从具有样式 /someFolderInPages/index.html 的组件引用页面时，您得到的错误可能是预期的 - 开头的 / 是一个“绝对说明符”并告诉 parcel to start at the project root.因此，您可能需要编写 /pages/someFolderInPages/index.html 或 /src/pages/someFolderInPages/index.html（取决于您的项目的结构），以便 parcel 能够正确找到您想要的源文件。

但是，这并不能真正解决您的问题，因为您遇到的第二个错误（当您使用样式 "../pages/someFolderInPages/index.html" 时）是当您将 does 解决依赖关系。在我看来，这可能是包裹中的一个错误 - 如果您愿意，请随时提交 github 问题。

但是，可能有更好的方法来完成您想要的，同时具有避免此错误的副作用。您说“组件只是 html 的一部分，我想在整个应用程序中重复使用”——如果仅此而已，如果在构建时将它们插入到页面中，对应用程序的用户来说性能会更高而不是运行-time.

Parcel 可以使用 .pug 模板（参见 parcel docs and pug docs）做到这一点。

例如，“组件”可能有一些可重复使用的 html 片段（以 pug 语法表示）：

/src/components/someComponent.哈巴狗

a(href="../pages/someFolderInPages/index.pug") Link from a component to a page

然后，您可以在这样的“页面”中包含：

/src/page/anotherFolderInPages/index.哈巴狗

doctype html
html
  body
    h1 The link from the component will show up below:
    include ../../components/someComponent.pug

Parcel 将在编译时负责构建页面（将其转换为 .html 文件），因此不需要单独的 javascript 包在运行时间只是为了插入一些 HTML.

ParcelJs：捆绑一个包含锚标记但不是入口点的 html 文件

ParcelJs: bundle an html file that contains an anchor tag and that is not an entry point

html

javascript

parceljs