如何使用 ParcelJS 将 HTML 作为字符串导入

Question

我想使用 ParcelJS 将 HTML 文件作为字符串导入，如下所示：

import testHTML from './testHTML.html';

document.body.insertAdjacentHTML('afterbegin', testHTML);

但是文档说：

在 JavaScript 中导入 HTML 并不会静态包含 HTML 字符串，而是会使用 Fetch API 动态获取 HTML 文件。

有没有办法强制导入为字符串？

Answer 1

• https://parceljs.org/languages/pug/

 import html from 'bundle-text:./index.pug'; document.body.innerHTML = html;

所以，html 也可以

没有任何配置

import html from 'bundle-text:./index.html';
document.body.innerHTML = html;

• https://parceljs.org/features/bundle-inlining/

typescript 修复ts(2307)

像“*.vue”

// index.d.ts
declare module 'bundle-text:*' {
    const s: string
    export default s
}

Answer 2

几天后跟进 - 这似乎是不可能的。 不过 RollupJS有这个能力。

Answer 3

如果您使用 rollup 作为模块包，此插件rollup-plugin-html将允许您将 html 文件作为字符串导入：

rollup.config.js

import htmlLoader from "rollup-plugin-html";

plugins: [
  ...
    htmlLoader({
      include: "**/*.html",
    }),
  ...
]

然后：

import testHTML from './testHTML.html';

document.body.insertAdjacentHTML('afterbegin', testHTML);