在 JavaScript 中根据需要解析 HTML 模板

Question

我花了几个小时进行基本的 webpack 配置，但仍然无法使其工作。我的目标是在将 html 模板导入 JavaScript 文件时对其进行解析。它看起来像是一个常见的用例，但我的 webpack 配置或我的理解中应该有一些奇怪的东西。

\n\n

我寻找了html-loader、 、 的配置html-webpack-plugin，posthtml并且pug阅读了他们的所有文档，但没有一个起作用。

\n\n

根据PostHTML 自述文件：

\n\n

\n

PostHTML 是一个使用 JS 插件转换 HTML/XML 的工具。PostHTML 本身非常小。它仅包括 HTML 解析器、HTML 节点树 API 和节点树字符串生成器。

\n

\n\n

因此，由于它是最有前途的，我用 posthtml 报告了我的尝试：

\n\n

   rules: [\n      {\n        test: /.html$/,\n        use: [\n          {\n            loader: "html-loader",\n            options: {\n              minimize: true,\n              interpolation: false\n            }\n          },\n          {\n            loader: "posthtml-loader"\n          }\n        ]\n      }\n    ]\n

\n\n

它不会返回任何错误，但看起来完全忽略了 posthtml-loader，因为执行import template from \'src/test.html\'\xc2\xa0I 将模板作为字符串获取（应该如何html-loader单独执行）。

\n\n

根据我的理解，加载器应该编译/转换不同格式的文件并使它们可用于 JavaScript，并且由于html这是前端项目中最常见的类型，我认为这很容易，但我没有找到任何内容互联网与这个问题相关。

\n\n

我期望的是有一个 DOM 树对象，或者无论如何，可以由 JavaScript 使用的东西。

\n\n

有人能帮助我吗？

\n\n

编辑：我的问题是关于 webpack 配置和工作。我知道很多解析 HTML 字符串的解决方案，但它们在这里不适用

\n

Answer 1

对我来说，它posthtml-loader主要是一个帮助在构建过程中“准备”HTML 的工具。它的解析器选项允许您中断该string -> PostHTML AST Tree步骤，它的插件选项允许您修改树。然后，它会字符串化回 HTML。

我在 webpack 插件中找不到返回临时树格式的选项。

您可以编写一个小型自定义加载程序来将 HTML 字符串解析为 DOM 对象：

// custom-loader.js
module.exports = function(content) {
  return `module.exports = (function() {
    const parser = new DOMParser();
    const doc = parser.parseFromString("${content}", "text/html");
    return doc.body.children; 
  }())`;
};

然后，在您的 中webpack.config.js，您可以告诉 webpack 让.html文件通过此加载器：

// webpack.config.js
module.exports = {
  mode: 'development',
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.bundle.js'
  },
  devtool: "eval-source-map",
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [ './custom-loader' ]
      }
    ]
  }
};

现在，每当您键入类似内容时，const template = require('./template.html');您都会得到一个HTMLCollection实例，而不仅仅是一个字符串。

请注意，此加载程序添加了对 的依赖项DOMParser，该依赖项仅在浏览器中可用。jsdom如果您想在非浏览器环境中运行，您可以将其替换为类似的内容。